JavaScriptで非同期処理を書くとき、コールバックのネストが深くなって読みづらくなってしまいます。Promiseやasync/awaitを使うと良いと聞いたのですが、具体的な書き方の違いがよくわかりません。
例えば「1秒待ってから値を返す処理」を順番に3回実行したい場合、どう書くのがモダンなやり方でしょうか？
async/awaitを使うのが今の主流です。まず、待つ処理をPromiseで包みます。
function wait(v) {
return new Promise(resolve => {
setTimeout(() => resolve(v), 1000);
});
}これをasync関数の中でawaitすると、同期処理のように上から順に書けます。
async function run() {
const a = await wait(1);
const b = await wait(2);
const c = await wait(3);
console.log(a, b, c); // 1秒ごとに 1 2 3
}
run();ポイントは、awaitはasync関数の中でしか使えないことです。ネストが消えて格段に読みやすくなります。
補足です。エラー処理はtry/catchでまとめて書けます。
async function run() {
try {
const a = await wait(1);
} catch (e) {
console.error(e);
}
}並列でよいならPromise.all([wait(1), wait(2)])を使うと3秒→1秒に短縮できますよ。
.then()のチェーンでも書けますが、分岐やエラー処理が増えるとasync/awaitのほうが圧倒的に読みやすいので、新規コードならasync/await推奨です。