【ES2017】async/await の基礎（後編）
前回に続き、Async Function（async/await）の使い方について学びます。
今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。
Async Functionとコールバック関数の問題
await 式による非同期処理の待機は、Async Functionの中でコールバック関数を定義するケースで思い通りの動作にならないケースがあります。
逐次処理でそのケースを見てみます。
Promiseだけ使ったケース
まず、問題なく動作する通常のPromiseを使った逐次処理です。
main 関数の引数に与えられたパスを逐次フェッチして結果をコンソール出力することを想定したサンプルです。
function dummyFetch(path) { return new Promise((resolve, reject) => { setTimeout(() => { // pathが「/success」始まりならresolve if (path.startsWith('/success')) { resolve({ body: `success to ${path}` }); } else { reject(new Error('Not found.')); } }, 500); }); } function main(paths) { paths.reduce((promise, path) => { return promise .then(() => dummyFetch(path)) .then(value => { console.log(value.body); }) .catch(console.error); }, Promise.resolve()); } main(['/success/foo', '/success/bar', '/success/buz']); /* 実行結果（500ms毎に出力される） -------------- success to /success/foo success to /success/bar success to /success/buz -------------- */
Async Functionとコールバック関数を使ったケース
ではこれを await 式とコールバック関数（forEach）を使って実装してみます。（main 関数の内容を変更しています）
function dummyFetch(path) { // 略 } async function main(paths) { paths.forEach(async path => { const result = await dummyFetch(path); console.log(result); }); } main(['/success/foo', '/success/bar', '/success/buz']); /* 実行結果（500ms後に全て出力される） -------------- success to /success/foo success to /success/bar success to /success/buz -------------- */
コールバック関数に async をつけているので大丈夫かと思うかもしれませんが、実際に実行してみると、500ms後に、3つすべての結果が出力されてしまいます。
不具合の理由
なぜかというと、非同期処理の完了を待つのはコールバック関数内のawait 式の箇所で行われていますが、外側では dummyFetch 関数の完了を待つことなく進んでいるためです。
下記で確認してみます。
async function main(paths) { console.log('1. main関数 start'); paths.forEach(async path => { console.log('2. dummyFetch関数 start'); const result = await dummyFetch(path); console.log(result.body); console.log('4. dummyFetch関数 end'); }); console.log('3. main関数 end'); } main(['/success/foo', '/success/bar', '/success/buz']); /* 実行結果 -------------- 1. main関数 start 2. dummyFetch関数 start -> 3回連続出力される 3. main関数 end （500ms毎に出力される） success to /success/foo 4. dummyFetch関数 end success to /success/bar 4. dummyFetch関数 end success to /success/buz 4. dummyFetch関数 end -------------- */
コールバック関数内の console.log('2. dummyFetch関数 start '); が一気に3回連続で実行されているのが分かります。
本来は1つ目のコールバック関数内の非同期処理が終わったら、2つ目のコールバック関数を実行するというふうになってもらいたいのが、非同期処理が終わることを待つことなく次のコールバック関数が実行されてしまっているというわけです。
解決方法
コールバック関数を使わずに、for 文または for-of 文を使うことで解決できます。
// for文を使った場合 async function main(paths) { for (let i = 0; i < paths.length; i++) { const result = await dummyFetch(paths[i]); console.log(result.body); } } // for-of文を使った場合 async function main(paths) { for (let i = 0; i < paths.length; i++) { const result = await dummyFetch(paths[i]); console.log(result.body); } }
非同期のコールバック関数内のエラーをキャッチできない
await の右辺に関数が渡された場合、呼び出し先の関数内（Promise内部を含む）で起こる同期的な例外、またはreject されたPromiseが返った場合は呼び出し元で、try-catch によるエラーハンドリングが可能です。
下記は、main 関数の引数に渡す配列に、/success から始まるパスではないものを渡しています。
/success から始まらない場合は reject となるので、それが正しくキャッチされているのが分かります。
function dummyFetch(path) { // 略 } async function main(paths) { for (const path of paths) { try { const result = await dummyFetch(path); console.log(result.body); } catch (error) { console.log(error); } } } main(['/success/foo', '/fail/bar', '/fail/buz']); // 2回目、3回目はrejectするパスを渡している /* 実行結果（500ms毎に出力される） -------------- success to /success/foo Not found. Not found. -------------- */
しかし、次のような非同期のコールバック関数内でのエラーはキャッチできず、Uncaught Error: 予期せぬエラー とコンソール上に出力され、処理も途中で止まってしまいます。
（dummyFetch 関数の setTimeout 内でエラーを throw しています）
function dummyFetch(path) { return new Promise((resolve, reject) => { setTimeout(() => { // 非同期コールバック関数内でエラーを発生させる throw new Error('予期せぬエラー'); // pathが「/success」始まりならresolve if (path.startsWith('/success')) { resolve({ body: `success to ${path}` }); } else { reject(new Error('Not found.')); } }, 1000); }); } async function main(paths) { for (const path of paths) { try { const result = await dummyFetch(path); console.log(result.body); } catch (error) { console.log(error.message); } } } main(['/success/foo', '/success/bar', '/success/buz']); /* 実行結果 -------------- Uncaught Error: 予期せぬエラー -------------- */
理由
そもそも例外は関数の呼び出し履歴（コールスタック）をさかのぼって伝播していきます。
（参考：JavaScriptと非同期のエラー処理 - Yahoo! JAPAN Tech Blog）
非同期のコールバック関数内のコンテキストでは呼び出し元がグローバルとなるため、このdummyFetch 関数の例外とならないため、キャッチができないと思われます。
グローバルでエラーとなったものは、window.onerror 等で拾うことができます。
試しに下記コードを追加してみると、コンソールでエラーメッセージを出力されるのが確認できました。
window.addEventListener('error', event => { console.log(event.message); // Uncaught Error: 予期せぬエラー });
解決方法
非同期コールバック関数内の例外は throw ではなく reject() で伝えるようにすればエラーハンドリングができます。
今回は下記のように setTimeout のコールバック関数を try-catch でラップし、キャッチした error を reject で伝えています。
こうすることで、途中で処理が止まることなくエラーハンドリングが可能になります。
function dummyFetch(path) { return new Promise((resolve, reject) => { setTimeout(() => { try { throw new Error('予期せぬエラー'); // pathが「/success」始まりならresolve if (path.startsWith('/success')) { resolve({ body: `success to ${path}` }); } else { reject(new Error('Not found.')); } } catch(error) { reject(error); } }, 1000); }); } async function main(paths) { for (const path of paths) { try { const result = await dummyFetch(path); console.log(result.body); } catch (error) { console.log(error.message); } } } main(['/success/foo', '/success/bar', '/success/buz']); /* 実行結果（500ms毎に出力される） -------------- 予期せぬエラー 予期せぬエラー 予期せぬエラー -------------- */
まとめ
Async Functionではこのようにコールバック関数で思わぬ不具合が生じる可能性があります。
このことから、そもそもAsync Functionが使える環境ではPromiseと await 式を使ってコードを書くようにして、非同期のコールバックはなるべく使わないようにする方が望ましいでしょう。
