[JavaScript] コールバック関数をやめてPromiseでスッキリさせよう

JavaScriptのコードを書いていると、何かを処理した後に呼ばれるコールバック関数が増えてきて、書いていくのが面倒だと感じていた(いわゆるコールバック地獄に陥る)のですが、Promiseオブジェクトを使うと綺麗にまとめられます。

要約

詳細な説明は MDNのドキュメント などを読んでいけば分かりますが、長い文章が出てくるので面倒に感じてしまいます。

• Promise
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

分かってしまえばそんな難しいことではなかったです。ちゃんと覚えようとすると上の説明のように長くなってしまうので、ここでは簡単な説明だけに留めて、とりあえずPromiseを使ってみようとするまでの手順をまとめました。

呼び出し側

• 処理したい関数に続けて、成功した時の処理を .then() の中に書き、失敗した時の処理を .catch() の中に書きます

ここでは、 jobInsert() 関数を実行して、成功した時に res.send() を実行して、失敗した時に res.status(500) を実行する例を考えてみます。

Promise呼び出し側の例

jobInsert(req.body).then(result => {
    // 成功した時
    res.send(result);
}).catch(error => {
    // 失敗した時
    res.status(500).send(error);
});

.catch を書かずにカンマ区切りで成功時の処理と失敗時の処理を続けて書くこともできますが、分かりにくい気がしますので、上記のように書くのがいいと思います。

処理側

• Promise オブジェクトを返す関数を作り、成功時に resolve() 、失敗時に reject() を実行します
• resolve() と reject() の引数はそれぞれ、呼び出し側に渡る result、 error の値になります

Promiseを返す処理の例

function jobInsert(body) {
    return new Promise((resolve, reject) => {
        if (xxxxxxxx(body)) {  // 何かの処理
            // 成功時
            resolve("OK");
        } else {
            reject("NG");
        }
    });
};

連続した処理

• .then() を繋げてPromiseを返す複数の処理を続けて書くことができます
• 複数の処理を続けた場合でも、エラー時の .catch() は一つで済ませられます

複数の処理を続ける例

firstFunction(req.body).then(result => {
    // 1つ目の処理が成功した時
    secondFunction(result);
}).then(result => {
    // 2つ目の処理が成功した時
    res.send(result);
}).catch(error => {
    // 失敗した時
    res.status(500).send(error);
});