Async/Await

どうやって書くの？

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

async/await構文

• asyncはPromiseインスタンスを返す関数を定義する際に使用する。
• awaitはPromiseインスタンスが返ってくるまで処理の完了を待つ。

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秒後に出力される