asyncとawait - JavaScript

JavaScriptのasync

JavaScriptで非同期処理を書く方法は、コールバック関数、Promise、そしてasyncがあります。
asyncは関数宣言につけることができ、asyncを付けた関数は非同期で処理されます。

async function f() {
  何らかの処理
}

asyncを付けた関数はPromiseを返すようになります。
そして、関数内でreturnした場合は、Promiseのresolveが呼ばれるように変換されます。
また、関数内でthrowした場合は、Promiseのrejectが呼ばれるように変換されます。

つまり、asyncがつけられた関数は、その処理がPromiseのコンストラクタの引数の中に入れられ、return/throwがresolve/rejectに置き換えられます。

このように、asyncがつけられた関数はPromiseを返す関数となり、非同期処理が実行されます。

JavaScriptのawait

asyncがつけられた関数内では、awaitを使うことができるようになります。

awaitは非同期処理の終了を待つようになります。
また、返り値を通常の関数のように、受け取れるようになります。

function setPromiseTimer(ms) {
  return new Promise(function(resolve) { 
      setTimeout(function() { 
          resolve('timeout') 
      }, ms)
  })
} 

// async/awaitを使わない場合 
function f() {
  setPromiseTimer(1000).then(result => console.log(result));
}

// async/awaitを使う場合
async function g() {
  const result = await setPromiseTimer(1000);
  console.log(result);
}

f();
g();

async/awaitを使わない場合は、Promise.thenを使って、結果を受け取りconsole.logで表示しています。
async/awaitを使う場合は、awaitで処理の終了を待ち、返り値を変数resultに代入し、次の行でconsole.logが処理され、resultが表示されます。

終わり