JavaScriptでAsyncとAwaitを使用する方法

ES6で導入されたPromisesを使用すると、さまざまなコールバック関数を処理しなくても、非同期コードを簡単に記述できます。 Promisesを使用すると、作成と保守の両方が難しいマルチレベルのコールバック関数について心配する必要はありません。

JavaScriptには、Promisesを使用して非同期コードをさらに簡単に記述できるもう1つの機能、async/await関数があります。これらを使用すると、同期しているように見えても実際には非同期ルーチンを実行するコードを記述できます。

このガイドでは、async / await関数とは何か、そしてそれをコードでどのように使用できるかについて説明します。始めましょう！

約束：復習

async / await関数について話し始める前に、Promisesを要約する必要があります。 promiseは、非同期操作を表します。これは、操作が実行されることをコードに通知し、操作が成功すると、値が返されます。そうしないと、プログラムの残りの部分にエラーが返されます。

Promiseは、Promiseの作成時にわからない値を表します。約束はまさにそれです：将来の値があなたのコードに送り返されるという約束。 Promiseはオブジェクトであるため、大文字にする必要があります。

このシナリオを考えてみましょう。 APIからリソースを取得する必要があります。リクエストの処理には1〜2秒かかります。ユーザーにリクエストの処理を待たせる代わりに、コードをPromiseに移動して、プログラムの残りの部分を実行し続けることができます。

これは、データが取得されている間、Webサイトのユーザーインターフェイスの一部をレンダリングし続けることができることを意味します。値が返されるとすぐに、Promiseはその値をメインプログラムに送信します。

Promiseの例は次のとおりです：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

let sendCookies = new Promise(resolve => {
	setTimeout(() => {
		resolve("Your cookies have been sent!");
	}, 1000);
});

sendCookies.then(data => {
	console.log(data);
})

コードが返されます：Cookieが送信されました！ sendCookies.then（）メソッドを実行すると、Promiseが開始されます。プログラムは1,000ミリ秒待機してから、「Cookieが送信されました！」という値を返します。私たちのメインプログラムに。

AsyncとAwaitの使用方法

async / await関数では、awaitステートメントは、Promiseが返されるまで、コードがそのasync関数内で実行されるのをブロックします。このため、開発者は、非同期/待機関数は同期しているように見えますが、非同期タスクを実行するとよく言います。

次の例を考えてみましょう：

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

main();

コードが返されます：Cookieが送信されました！ sendCookies（）関数が「Cookieが送信されました」という値を返すまでに1,000ミリ秒かかります。この場合、非同期関数を宣言して、コードがpromiseの解決または拒否を待機するようにしました。

「async」キーワードは、関数で非同期操作を実行することをコードに通知します。 「await」キーワードは、プログラムの実行を続行する前に、sendCookies（）Promiseが返されるのを待つようにコードに指示します。

非同期関数は常にPromiseを返します。

AsyncとAwaitを複数のステップで使用する

非同期/待機機能は、操作する必要のある複数のPromiseがある場合に最も一般的に使用されます。これは、Promisesチェーンと呼ばれることもあります。これは、コードが各ステップでPromiseが返されるのを待ってから、次のステップに進むためです。

function processOrder()  {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookie order is being processed...");
		}, 1000);
	});
}

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const processingMessage = await processOrder();
	console.log(sendMessage);

	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

コードは次のようになります：

Your cookie order is being processed…
Your cookies have been sent!

各ステップの完了には1,000ミリ秒かかります。 sendCookies（）関数は、processOrder（）関数からのPromiseが返されるまで実行されません。

非同期式

async/await関数を使用する方法は3つあります。

最初の方法は、最後の例で示したアプローチです。関数を宣言することです。この例では、Promiseを返す関数を宣言してから、「async」および「await」キーワードを使用してこれらの関数を実行しました。

矢印関数を使用して非同期関数を宣言することもできます：

const main = async () => {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

このコードは次のようになります。Cookieが送信されました。これは最初の例と同じですが、main（）関数を宣言する代わりに、矢印関数を使用しました。

同様に、関数式の構文を使用できます：

const main = async function() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

このコードは次のようになります。Cookieが送信されました。ご覧のとおり、出力は再び同じです。唯一の違いは、関数を宣言する方法です。

実際、この構文は最後の例と非常によく似ています。矢印関数を使用する代わりに、「function（）」キーワードを使用しました。

async/await関数を宣言する最良の方法はありません。それはすべて、作成しているプログラムと好みの構文によって異なります。矢印関数が最も簡潔な方法であると主張することもできますが、非同期/待機関数を宣言する他の方法が他の場合に適している場合があります。

Async/Awaitを使用したWebリクエストの処理

async / await関数の最も一般的な使用法の1つは、fetch（）などのPromiseベースのAPIを使用してWebリクエストを処理することです。 fetch（）関数の使用方法の詳細については、JavaScriptフェッチの初心者向けガイドをご覧ください。

この例を考えてみましょう：

async function retrieveComments() {
	const res = await fetch('https://jsonplaceholder.typicode.com/comments');
	var comments = await res.json();

	comments = comments.map(comment => comment.name);

	console.log(comments);
}

retrieveComments();

コードは次のようになります：

["id labore ex et quam laborum", "quo vero reiciendis velit similique earum" …]

retrieveComments（）関数を実行するときは、「await」キーワードを使用して、fetch（）ステートメントが実行されるのを待ちます。これは、Webリクエストが処理されるまで、プログラムの残りの部分が続行されないことを意味します。これは、fetch（）関数がPromiseを返すためです。

Promiseがfetch（）関数によって返されると、返された値をJSONに変換します。次に、オブジェクトをマップしてすべてのコメントの名前のリストを取得し、そのリストをコンソールに出力します。

エラーの処理方法

ああ、コードでエラーが発生しないようにしたいと思います。しかし、彼らはそうします、そしてそれは私たちの開発者が計画しなければならないことです。非同期関数では、エラー処理はtry…catchステートメントを使用して同期的に実行されます。このコードを検討してください：

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	const cookies = await retrieveCookies();
	console.log(cookies);
}

printCookies().catch(res => console.log(res.message));

コードは次のようになります：

NetworkError when attempting to fetch resource. While our code is functional, the API we are trying to access does not exist. This means that our Promise cannot return any data, so it instead returns a rejected Promise.

この例では、.catch（）ステートメントを使用して、関数が返された場合に関数によって返されるエラーを出力しました。この場合、reject（‘Error’）を使用して、エラーが発生したことをコードに通知します。

このステートメントが実行されると、.catch（）ステートメントが実行され、そのエラーが出力されます。

同様に、非同期関数は構文エラーをキャッチできます：

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	try {
		const cookies = await retrieveCookies();
		console.log(cookies);
	} catch(error) {
		console.log(error);
	}
}

printCookies();

リソースをフェッチしようとすると、次のコードが返されます。NetworkError。この例では、try / catchステートメントを使用して、awaitメソッドが成功したPromiseを返したかどうかを確認しました。繰り返しになりますが、APIが無効であるため、プログラムはPromiseを拒否します。これが発生すると、try / catchブロックの「catch」ステートメントが実行され、エラーがコンソールに記録されます。

結論

Async / await関数は、コードに非同期操作を記述するのに役立ちます。非同期関数が宣言されている場合、「await」キーワードを使用して、操作が解決されるのを待つことができます。 awaitキーワードは、Promiseを返す関数で使用する必要があります。

これで、エキスパートのような非同期/待機JavaScript関数の使用を開始する準備が整いました！