非同期 JavaScript チートシート

JavaScript の async/await/Promise に関する情報は巷に溢れているのですが、情報が古かったり微妙に間違っているものが多いようです。そんなドキュメントを読んだであろう新人君が混乱していて可哀想だったので、とりあえずこれだけは押さえておいて欲しいポイントをまとめました。

async/await の基本的な使い方

• async function は await で待つ
• Promise を返すライブラリ/関数は await で待つ
• async function は return できる
• async function は throw できる

これだけ押さえておけば9割方戦えます。

例えば、ある WebAPI を叩いて、別の WebAPI に POST し、結果を返すという処理を書いてみます。fetch() は Promise を返します。

const fetch = require("node-fetch");

async function cron(msg) {
    const getResponse = await fetch("https://httpbin.org/get");
    const json = await getResponse.json();

    const request = {
        method: "POST",
        body: "my IP address=" + json.origin
    };
    const postResponse = await fetch("https://httpbin.org/post", request);
    const postJson = await postResponse.json();
    return postJson;
}

(async function () {
    const result1 = await cron("hoge");
    console.log(JSON.stringify(result1, null, 2));
})();

とても見通しが良いですね。

例外ハンドラも async/await ならストレートに書けます。

async function throwError() {
    throw "ERROR";
    return "result";
}

(async function () {
    try {
        const result2 = await throwError()
        console.log(result2)  // ここは出力されない
    } catch (err) {
        console.log(err)
    }
})();

非同期 JavaScript のアンチパターン

new Promise() するな

Promise を返す関数は async function で置き換えることができます。Promise を使うとコールバック形式で書くことになり、どうしても見通しが悪くなります。new Promise() していいのは平成までです。令和のこの時代に書くコードでは async を使いましょう。

ただし古いライブラリなどでコールバック形式しか対応していないものもあります。setTimeoutとかがそうです。そういったAPIと付き合うときだけ Promise は使いましょう。

Promise オブジェクトは await で待て

Promise オブジェクトは Promise.then() でコールバック関数を登録し、結果を取得することもできます。しかし所詮コールバックなので、どうしても可読性が落ちます。
Promise オブジェクトが返す結果は await で取得できます。
await を使いましょう。