Skip to content

Async/Await

どうやって書くの?

非同期処理の代表的な関数としてsetTimeout(コールバック関数, delay)関数を使用した例を挙げる。 Promiseオブジェクトを利用する場合と、async/await構文を利用する場合の書き方を綴る。

async/await構文

  • asyncPromiseインスタンスを返す関数を定義する際に使用する。
  • awaitPromiseインスタンスが返ってくるまで処理の完了を待つ。
asyncの使い方
async function fn() {
return "あいうえお!";
}
fn().then((r) => { // async構文で書かれたfn()はPromiseを返す
console.log(r);
})
asyncを使わない書き方
// asyncを使えばPromiseインスタンスとして勝手に返してくれるが
// asyncを使わずにreturnでPromiseを指定すればよい。
function fn() {
return Promise.resolve("あいうえお!");
}
fn.then((r) => {
console.log(r); // "あいうえお!"が出力される。
})
let a = 0;
console.log(a);
// 3秒後に引数の2倍の値を返す関数
function twice(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
value = value * 2;
resolve(value);
}, 3000);
})
}
// twice()を呼び出す関数
async function sample() { // awaitを使った関数(呼び出し元)の前方にasyncをつける。
const a = await twice(1); // 待ってあげたい処理の先頭にawaitをつける。
return a;
}
sample().then((r) => {
console.log(r);
});
console
0
2 # 3秒後に出力される
複数の処理を待ちたい時
function twice(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
value = value * 2;
resolve(value);
}, 3000);
})
}
async function sample2() {
const a = await twice(1);
const b = await twice(2);
const c = await twice(3);
return a + b + c;
}
sample2().then((r) => {
console.log(r);
});
// 複数の処理を並列で処理したい時
async function sample3() {
const [a, b] = await Promise.all([twice(10), twice(20)]);
return [a, b];
}
sample3().then((r) => {
console.log(r);
});
console
0
[20, 40] # 3秒後3秒後に出力される
12 # 9秒後に出力される