非同期関数を使用すると、Promise ベースのコードをあたかも同期であるかのように記述できます。
非同期関数は Chrome、Edge、Firefox、Safari でデフォルトで有効になっており、率直に言って驚くほど素晴らしいものです。これにより、メインスレッドをブロックせずに、Promise ベースのコードを同期であるかのように記述できます。これにより、非同期コードの「巧妙さ」が下がり、読みやすくなります。
非同期関数は次のように動作します。
async function myFirstAsyncFunction() {
try {
const fulfilledValue = await promise;
} catch (rejectedValue) {
// …
}
}
関数定義の前に async キーワードを使用すると、関数内で await を使用できます。Promise に対して await を実行すると、Promise が解決するまで、関数は非ブロック方式で一時停止します。Promise が履行されると、値が返されます。Promise が拒否された場合は、拒否された値がスローされます。
ブラウザ サポート
例: 取得をログに記録する
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() を内部で呼び出して非同期ループを設定する仕組みをご確認ください。書くことでとても賢いと感じました。しかし、ほとんどの「スマート」なコードと同様に、何をしているのかを理解するために何年もコードを見続ける必要があります。たとえば、1990 年代の魔法の目のような絵のようなものです。
非同期関数でもう一度試してみましょう。
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!';
}
上記の処理が完了するまでに 1, 000 ミリ秒かかりますが、次の処理は完了です。
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 ループに置き換えられています。
ブラウザ サポートの回避策: ジェネレータ
ジェネレータ（すべての主要なブラウザの最新バージョンを含む）をサポートするブラウザをターゲットにしている場合は、非同期関数をポリフィルできます。
これは 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;
});
ジェネレータ（function*）を createAsyncFunction に渡して、await ではなく yield を使用する必要があります。それ以外は同じように動作します。
回避策: リジェネレータ
古いブラウザを対象としている場合、Babel ではジェネレータをトランスパイルすることもできます。これにより、IE8 まで非同期関数を使用できます。これを行うには、Babel の es2017 プリセットと es2015 プリセットが必要です。
出力はそれほど整っていないため、コードの肥大化に注意してください。
すべてを非同期にします。
すべてのブラウザで非同期関数を導入したら、Promise を返すすべての関数で使用します。コードを整理できるだけでなく、その関数が常に Promise を返すようになります。
私は 2014 年に非同期関数に興味を持ちました。非同期関数が実際にブラウザで利用できるのは素晴らしいことです。やりました！