4.1 キーワード async
JavaScriptの非同期関数は、同期的に見える非同期コードを書くのを助けてくれるんだ。asyncとawaitというキーワードはECMAScript 2017 (ES8)で導入されて、Promiseの取り扱いを簡単にしてくれる。コードもよりわかりやすく、管理しやすくなるよ。
基本的なコンセプト
asyncを関数の宣言の前につけると、その関数が非同期であることを示すんだ。非同期関数は必ずPromiseを返す。たとえreturnが明示されていなくてもね。関数が値を返すと、その値は自動的にPromiseに包まれるよ。
構文:
async function 名前() {
// 関数のコード
}
例:
JavaScript
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // 出力: Hello, world!
});
4.2 キーワード await
awaitは非同期関数の中で使われて、Promiseが完了するまでその実行を一時停止するために使われるんだ。awaitはasyncキーワードで宣言された関数の中でしか使えないよ。
構文:
let result = await
promise;
例:
JavaScript
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // 出力: Hello, world! 2秒後
}
displayGreeting();
4.3 asyncとawaitの使用例
例 1: 複数のPromiseを待機する非同期関数
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // 出力: Data 1 1秒後
const data2 = await fetchData2();
console.log(data2); // 出力: Data 2 2秒後
}
fetchAllData();
例 2: 並列での非同期操作の実行
複数の非同期操作を並列で実行するには、Promise.all()とawaitを使うんだ。
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // 出力: Data 1 2秒後
console.log(data2); // 出力: Data 2 2秒後
}
fetchAllData();
例 3: try...catchを使ったエラーハンドリング
非同期関数ではtry...catchブロックを使ってエラーハンドリングができるんだ。それでコードがもっと読みやすく、管理しやすくなるよ。
JavaScript
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // 出力: Error: Error occurred 1秒後
}
}
fetchData();
例 4: クラスのメソッドでのasyncとawaitの使用
非同期関数はクラスのメソッドでも使えるんだ。
JavaScript
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // 出力: Fetched Data 1秒後
});
例 5: 非同期イテレータ
非同期イテレータは、非同期にやってくるデータストリームを扱うのに使えるんだ。
JavaScript
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // 出力: 0, 1, 2 1秒間隔で
}
}
iterateAsyncGenerator();
GO TO FULL VERSION