JavaScript Promise入門 | then/catch/Promise.allの使い方

Promise は未来の値を入れる「箱」のようなもの

JavaScript でネットワーク通信やファイルの読み込み、タイマー処理など、時間がかかる処理を行うとき、結果をその場で返すことはできません。代わりに返ってくるのが Promise です。Promise は「いずれ手に入るはずの値」を表すオブジェクトだと考えてください。

const promise = new Promise((resolve) => {
    setTimeout(() => resolve("done"), 500);
});

console.log(promise);
promise.then((value) => console.log(value));

最初の console.log では、Promise が pending（保留中）の状態で表示されます。0.5 秒後に Promise が解決され、.then のコールバックがその値を受け取って実行されるわけです。Promise そのものはただのオブジェクトにすぎませんが、値が届いたタイミングで「待っている側」に通知できる仕組みを持っている点がポイントです。

Promise の 3 つの状態

Promise は常に、次の 3 つのうちいずれかの状態にあります。

• pending（保留中） - 処理がまだ進行中。値はまだありません。
• fulfilled（成功） - 処理が成功し、値が得られた状態。
• rejected（失敗） - 処理が失敗し、エラーが得られた状態。

Promise は pending から fulfilled または rejected のどちらかに 一度だけ 遷移し、その後はずっとその状態のままです。一度解決された Promise を元に戻したり、二重に解決したりすることはできません。

const ok = Promise.resolve(42);
const bad = Promise.reject(new Error("ダメでした"));

ok.then((v) => console.log("ok:", v));
bad.catch((e) => console.log("bad:", e.message));

Promise.resolve(value) はすでに fulfilled 状態の Promise を作り、Promise.reject(error) はすでに rejected 状態の Promise を作ります。テストを書くときや、関数によっては値が即座に決まるケースで Promise を返したいときに便利です。

値の取り出し方：.then と .catch の使い方

Promise の中身は直接取り出せません。代わりに .then にコールバックを渡しておくと、値の準備ができた時点で Promise 側がそのコールバックを呼んでくれます。

function fetchUser(id) {
    return new Promise((resolve) => {
        setTimeout(() => resolve({ id, name: "Ada" }), 200);
    });
}

fetchUser(1)
    .then((user) => console.log("取得:", user.name))
    .catch((err) => console.log("失敗:", err.message));

.catch(fn) は Promise が reject されたときに走ります。実は内部的には .then(undefined, fn) のシンタックスシュガーです。チェーンの末尾に .catch() を 1 つ置いておけば、そこまでの どのステップ で reject されてもまとめて拾えるので、.then ごとに付ける必要はありません。

Promise チェーン：.then は毎回新しい Promise を返す

ここが一番つまずきやすいポイントです。.then() は単にコールバックを実行するだけでなく、新しい Promise を返します。その Promise は、コールバックが返した値で resolve されます。だからこそチェーンがつながるわけです。

Promise.resolve(2)
    .then((n) => n + 1)
    .then((n) => n * 10)
    .then((n) => console.log(n));

各ステップが次の処理へと値を渡していきます。.then のコールバックが Promise を返した場合、チェーンは その Promise の完了を待ってから次に進むので、非同期処理をきれいに組み立てられます。

function delay(ms, value) {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

delay(100, "first")
    .then((v) => {
        console.log(v);
        return delay(100, "second");
    })
    .then((v) => {
        console.log(v);
        return delay(100, "third");
    })
    .then((v) => console.log(v));

非同期処理を3ステップ順番に、しかもネストなしで書けています。同じ処理をコールバックで書いたものと見比べれば、Promise がここまで普及した理由がすぐわかるはずです。

エラーはチェーンを伝って流れていく

reject された Promise は、.catch にたどり着くまで途中の .then をすべてスキップします。Promise のエラーハンドリングは、基本的にこれだけです。

Promise.resolve(10)
    .then((n) => {
        throw new Error("何かが壊れました");
    })
    .then((n) => {
        console.log("スキップされる");
        return n * 2;
    })
    .catch((err) => console.log("捕捉:", err.message));

.then の中で例外を投げると、その .then が返した Promise が reject されます。以降の .then はその reject をそのまま次へ受け流し、最終的に .catch が拾ってくれる、という流れです。基本的には、チェーンの末尾に .catch を1つ置いておけば十分です。逆に .catch が1つもないチェーンは「unhandled promise rejection」の警告が出るので、必ず対処しておきましょう。

new Promise で自作する書き方

普段は、ライブラリが返してくれる Promise を使うことがほとんどです。ただ、ごくたまに Promise を返してくれないもの--たとえば昔ながらのコールバック形式の API--を自分で Promise 化したい場面が出てきます。

function wait(ms) {
    return new Promise((resolve, reject) => {
        if (ms < 0) {
            reject(new Error("ms must be non-negative"));
            return;
        }
        setTimeout(() => resolve(ms), ms);
    });
}

wait(200)
    .then((ms) => console.log(`waited ${ms}ms`))
    .catch((err) => console.log(err.message));

new Promise に渡す関数は executor(実行関数) と呼ばれます。引数は2つで、resolve(成功時の値を渡して呼ぶ)と reject(エラーを渡して呼ぶ)です。どちらか一方をちょうど1回だけ呼んでください。2回目以降の呼び出しは無視されます。

覚えておくと後々ラクになるコツが2つあります。

• new Promise を使うのは、まだ Promise 化されていないものをラップするときだけにしましょう。すでに Promise を返す関数なら、そのまま return すれば十分です。
• reject には必ず文字列ではなく Error オブジェクトを渡しましょう。スタックトレースは残しておく価値があります。

並列実行には Promise.all を使う

.then でつなぐ Promise チェーンは順番に実行されます。独立した非同期処理が複数あって同時に走らせたいときは、Promise.all の出番です。

function delay(ms, value) {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

const start = Date.now();

Promise.all([
    delay(300, "users"),
    delay(200, "posts"),
    delay(400, "comments"),
]).then((results) => {
    console.log(results);
    console.log(`took ${Date.now() - start}ms`);
});

3つのタイマーはすべて並行して走ります。Promise.all は、すべての Promise が fulfilled になったタイミングで、入力と同じ順序の結果の配列を返してくれます。トータルの所要時間は900msではなく、だいたい400msほどです。

ただし注意点があります。Promise.all は、いずれかの Promise が reject された瞬間に全体として reject され、他の結果は捨てられてしまいます。「3つのAPI呼び出しがすべて揃わないとページを描画できない」といった、全部の結果が必須のケースでは、これが正しい挙動です。そうでない場合は allSettled を使いましょう。

一部失敗してもOKなとき: Promise.allSettled

Promise.allSettled は、fulfilled であれ rejected であれ、すべての Promise が完了するのを待ってから、結果のレポートをまとめて返してくれます。

const promises = [
    Promise.resolve("a"),
    Promise.reject(new Error("b failed")),
    Promise.resolve("c"),
];

Promise.allSettled(promises).then((results) => {
    for (const r of results) {
        if (r.status === "fulfilled") console.log("ok:", r.value);
        else console.log("err:", r.reason.message);
    }
});

それぞれの結果は { status: "fulfilled", value } または { status: "rejected", reason } というオブジェクトで返ってきます。一部が失敗しても処理を続けたい場面、たとえばイベントのバッチログ、サムネイルの一括取得、独立したヘルスチェックなどで便利です。

あわせて押さえておきたいコンビネータがあと2つあります。

• Promise.race([...]) - 複数の Promise のうち、成功・失敗を問わず 最初 に決着したものの結果を返します。タイムアウト処理に便利です。
• Promise.any([...]) - 最初に成功した Promise の値で fulfilled になり、reject は無視します。全部失敗したときだけ reject されます。

Promise は常に非同期で動く

たとえすでに resolve 済みの Promise であっても、.then のコールバックは必ず非同期で呼ばれます。同期的に実行されたり、同じティック内で走ったりすることはありません。

console.log("前");
Promise.resolve("即座に").then((v) => console.log(v));
console.log("後");

出力は 前、後、即座に の順になります。.then のコールバックは、現在実行中のコードが終わるのを待ってから、マイクロタスクキュー経由で実行されるからです。「Promise のコールバックは絶対に同期的には実行されない」--このルールがあるおかげで、Promise と同期コードを混ぜても挙動が読みやすくなります。同期コードが先に片付くことが保証されているわけですね。

次は async/await へ

.then をつないでいく書き方でも動きはしますが、ステップが3つ4つと増えてくると、どうしても階段状のネストになって見づらくなります。そこで登場するのが async/await。Promise の上に乗った構文で、非同期処理をまるで同期コードのように書けます。エラーは try/catch で拾えるし、途中の値も普通の変数に入れられる。次の章で詳しく見ていきましょう。