JavaScript async/awaitに関して

async/awaitとは？

• Promiseによる非同期処理を簡潔に記述するための記法。
• 非同期処理はthenを繋げる形で記載もできるが、async/awaitは可読性を向上させる。

使い方

1. asyncを付与したfunctionを用意
   →asyncを付与するとPromiseを返却し、return後にPromiseがresolveされる。
2. 上記関数内のPromise処理部分の前にawaitを付与する。
   →awaitはPromiseが確定するのを待つ役割を持つ。

function sugarPromise(){
  return new Promise(function(resolve) => {
     setTimeout(() => {resolve('hogehoge2')}, 10000)
  });
}

async function sugarSync(){
  const result = await sugarPromise();
  // sugarPromise()内でPromiseが解決するまで次の処理を行わない
  console.log(result);
}

sugarSync();
console.log('hogehoge1');

実行すると

hogehoge1
hogehoge2

となるはず。(1と２は10秒の間隔)

注意点

• 複数のawaitを記述するとそれぞれ待たないといけない。上記の例を以下の通り書き直すと10秒×３=30秒待たないといけない。

const result1 = await sugarPromise();
const result2 = await sugarPromise();
const result3 = await sugarPromise();

次の通り記載すると並列で処理が可能。

const result1 = sugarPromise();
const result2 = sugarPromise();
const result3 = sugarPromise();
const x1 = await result1;
const x2 = await result2;
const x3 = await result3;
console.log(x1);