async/await (JavaScript) の概要

JavaScript

要は

  • Promiseありき。Promise無き所にasync/await無し
  • await promiseと書くと、promiseが解決されるまでそこで待機
  • awaitを使えるのはasyncを付けて定義した関数のみ

少し説明

Promiseで非同期処理を逐次つなげると、コールバック地獄にはならないがごちゃごちゃする

// fn1(), fn2(), fn3() の返り値はPromise

function sequential(param1) {
  fn1(param1).then(ret1 => {
    const param2 = getParam2(ret1);
    return fn2(param2);
  }).then(ret2 => {
    const param3 = getParam3(ret2);
    return fn3(param3);
  });
}

async/awaitを使うと、同期処理であるかのように書ける

async function sequentialAsync(param1) {
  const ret1 = await fn1(param1); // resolveされるまで待つ
  const param2 = getParam2(ret1);
  const ret2 = await fn2(param2);
  const param3 = getParam3(ret2);
  const ret3 = await fn3(param3);
  return ret3;
}

ざっくり言えば、.then()の代わりにawaitを使う。 ちなみにasyncを関数の返り値は自動的にPromiseでラップされる。

.catch()はどう書き換えればよいのか

try-catchを使えばよい

function withCatch() {
  fn1().then(ret => {
    return fn2(ret);
  }.catch(err => {
    console.log(err);
    return fn2e();
  });
}

async function withCatchAsync() {
  try {
    const ret = await fn1();
    return await fn2(ret);
  } catch (err) {
    console.log(err);
    return await fn2e();
  });
}

参考