非同期関数: 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);
    });
  });
}

見てください、Jake Archibald は Promise の使い手です。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 の polyfill を取得してこれを自分自身で使用できます。従来の方法:

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