【JavaScript】async/awaitで非同期処理
 Author: ion

async/awaitとは

非同期処理を実現する構文。Promiseより簡潔に書けます。

async function sample() {}

asyncの使い方

async functionは非同期関数です。Promiseを返します。
Promiseというのがまた難しいんですが、非同期関数が一時的に返してくれるオブジェクトです。
async functionが何らかの値を返すとき、thenでそれを拾えます。

resolveのサンプルコード

async function resolve() {
  return 'resolve';
}
// いい例
resolve().then(arg => {
  console.log(arg);
});
// だめな例
const result = resolve();
console.log(result);

実行結果

resolve

async functionが例外を吐いた時はcatchで拾えます。

rejectのサンプルコード

async function reject() {
  throw new Error('reject');
}
reject().catch(err => {
  console.log(err);
})

await

async functionの中に非同期処理があるとき、awaitを指定するとその実行が終わるまで待機させることができます。
以下のコードを実行すると分かりやすいです。

async function resolve() {
  return 'resolve';
}

async function parent() {
  const result = resolve();
  console.log(result);
}

実行結果

Promise { 'resolve' }

parent関数はresultにresolveの結果を格納し、出力するだけの関数です。
しかし、このままでは実行してもPromiseオブジェクトが返ってくるだけです。
非同期処理のresolve()関数が文字列を返す前に、console.log(result)が走っているためです。
awaitを使って以下のように記述すると、期待する動きを実現できます。

async function resolve() {
  return 'resolve';
}

async function parent() {
  const result = await resolve();
  console.log(result);
}

実行結果

resolve