非同期関数: Promise を使いやすくする

非同期関数を使用すると、あたかも同期コードのように Promise ベースのコードを記述できます。

Jake Archibald

非同期関数は Chrome、Edge、Firefox、Safari でデフォルトで有効になっており、率直に言ってすばらしいものです。これにより、メインスレッドをブロックせずに、Promise ベースのコードを同期であるかのように記述できます。この関数は、非同期コードから「巧妙さ」を減らして読みやすくします。

非同期関数は次のように動作します。

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  } catch (rejectedValue) {
    // …
  }
}

関数定義の前に async キーワードを使用すると、その関数内で await を使用できます。Promise に対して await を実行すると、Promise が解決するまで、関数は非ブロック方式で一時停止します。Promise が解決されると、値が返されます。Promise が拒否された場合は、拒否された値がスローされます。

ブラウザ サポート

対応ブラウザ

  • Chrome: 55.
  • Edge: 15.
  • Firefox: 52.
  • Safari: 10.1。

ソース

例: 取得をログに記録する

URL をフェッチしてレスポンスをテキストとしてログ記録するとします。Promise を使用してこれは次のようになります。

function logFetch(url) {
  return fetch(url)
    .then((response) => response.text())
    .then((text) => {
      console.log(text);
    })
    .catch((err) => {
      console.error('fetch failed', err);
    });
}

非同期関数を使用した場合、次のようになります。

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  } catch (err) {
    console.log('fetch failed', err);
  }
}

行数に変わりはありませんが、コールバックがすべてなくなっています。はるかに読みやすくなっています。特に、Promise に詳しくない場合はなおさらです。

非同期の戻り値

非同期関数は、await を使用するかどうかに関係なく、常に Promise を返します。この Promise は、非同期関数によって返されるものが何であれ、これを使用して解決または棄却されます。次の例を見てみましょう。

// wait ms milliseconds
function wait(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return 'world';
}

…hello() を呼び出すと、"world" で解決される Promise が返されます。

async function foo() {
  await wait(500);
  throw Error('bar');
}

foo() を呼び出すと、Error('bar') で拒否する Promise が返されます。

例: レスポンスのストリーミング

非同期関数は、より複雑な例の場合にその利点を実感できます。チャンクのログ出力時にレスポンスをストリーミングし、最終的なサイズを返したいとします。

Promise の場合は次のようになります。

function getResponseSize(url) {
  return fetch(url).then((response) => {
    const reader = response.body.getReader();
    let total = 0;

    return reader.read().then(function processResult(result) {
      if (result.done) return total;

      const value = result.value;
      total += value.length;
      console.log('Received chunk', value);

      return reader.read().then(processResult);
    });
  });
}

見てください、ジェイク「約束の使い手」アーチボルド。processResult() をこれ自体の中で呼び出して非同期ループを作成しているのがわかるでしょう。とてもスマートなコードを記述できたという実感があります。しかし、たいていの「スマートな」コードと同じように、長時間見つめないとコードが何を実行しているのか把握できません。まるで 90 年代に流行った立体視画像のようです。

非同期関数を使用して再度試してみましょう。

async function getResponseSize(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let result = await reader.read();
  let total = 0;

  while (!result.done) {
    const value = result.value;
    total += value.length;
    console.log('Received chunk', value);
    // get the next result
    result = await reader.read();
  }

  return total;
}

「スマート」がすべてなくなりました。あっというまに感じた非同期ループが、信頼性が高く退屈な while ループに置き換わりました。前よりもはるかに良くなりました。将来的には、非同期イテレータが導入され、while ループが for-of ループに置き換えられて、さらにすっきりとさせられるでしょう。

その他の非同期関数構文

async function() {} はすでに説明しましたが、async キーワードは他の関数構文でも使用できます。

アロー関数

// map some URLs to json-promises
const jsonPromises = urls.map(async (url) => {
  const response = await fetch(url);
  return response.json();
});

オブジェクト メソッド

const storage = {
  async getAvatar(name) {
    const cache = await caches.open('avatars');
    return cache.match(`/avatars/${name}.jpg`);
  }
};

storage.getAvatar('jaffathecake').then(…);

クラスメソッド

class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jaffathecake').then(…);

気をつけて！過度な順次処理を避けます

同期的に見えるコードを記述している場合でも、並列で実行するチャンスを見逃さないようにしてください。

async function series() {
  await wait(500); // Wait 500ms…
  await wait(500); // …then wait another 500ms.
  return 'done!';
}

上記は完了するのに 1000 ミリ秒かかります。

async function parallel() {
  const wait1 = wait(500); // Start a 500ms timer asynchronously…
  const wait2 = wait(500); // …meaning this timer happens in parallel.
  await Promise.all([wait1, wait2]); // Wait for both timers in parallel.
  return 'done!';
}

上記は両方の待機が同時に発生するため、完了までにかかる時間は 500 ミリ秒です。実際の例を見てみましょう。

例: フェッチを順番に出力する

一連の URL をフェッチして、できるだけ早く正しい順序でログに記録するとします。

深呼吸 - Promise では次のようになります。

function markHandled(promise) {
  promise.catch(() => {});
  return promise;
}

function logInOrder(urls) {
  // fetch all the URLs
  const textPromises = urls.map((url) => {
    return markHandled(fetch(url).then((response) => response.text()));
  });

  // log them in order
  return textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise).then((text) => console.log(text));
  }, Promise.resolve());
}

reduce を使用して一連の Promise を連結しています。とても賢い。ただし、これは非常にスマートなコーディングなので、使わない方が得策です。

上記を非同期関数に変える場合は、順次的すぎるコードになりがちです。

非推奨 - 過度に順次処理を使用する
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
すっきりとしましたが、2 番目のフェッチは最初のフェッチが完全に読み込まれるまで開始されません。これは、フェッチを並行して実行する Promise の例よりもはるかに遅くなります。幸いなことに、理想的な解決策があります。
推奨 - すっきりとして並行処理する
function markHandled(...promises) {
  Promise.allSettled(promises);
}

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async (url) => {
    const response = await fetch(url);
    return response.text();
  });

  markHandled(...textPromises);

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
この例では、URL は並行でフェッチされて読み込まれていますが、「スマート」な reduce 部分は、つまらなくて読み取りやすい標準的な for-loop で置き換えられています。

ブラウザ サポートの回避策: ジェネレータ

ジェネレータ（すべての主要ブラウザの最新バージョンを含む）をサポートするブラウザが対象の場合は、ある程度非同期関数の polyfill が利用できます。

これは Babel が行います。Babel REPL を使った例をご覧ください

  • トランスパイルされたコードがどの程度類似しているかに注意してください。この変換は Babel の es2017 プリセットの一部です。

トランスパイル アプローチをおすすめします。ターゲット ブラウザで非同期関数がサポートされたら無効にできます。ただし、トランスパイラを本当に使用しない場合は、Babel のポリフィルを使用して自分で使用できます。従来の方法:

async function slowEcho(val) {
  await wait(1000);
  return val;
}

ポリフィルを追加して、次のように記述します。

const slowEcho = createAsyncFunction(function* (val) {
  yield wait(1000);
  return val;
});

createAsyncFunction にジェネレータ（function*）を渡し、await ではなく yield を使用する必要があります。これ以外は、同様に機能します。

回避策: リジェネレータ

古いブラウザが対象の場合は、Babel によりジェネレータをトランスパイルすることもできます。これにより、IE8 まで非同期関数を使用できます。これを行うには、Babel の es2017 プリセットと es2015 プリセットが必要です。

出力はほれほど洗練されていないため、長いコードに注意してください。

すべてを非同期にする

すべてのブラウザで非同期関数を導入したら、Promise を返すすべての関数で使用します。コードを整理するだけでなく、関数が常に Promise を返すようにします。

2014 年、非同期関数には本当にわくわくしました。この関数が実際にブラウザで使用できるようになるとは、わーい！