JavaScriptのPromiseについて

こんにちはプログラマー2年目の塚田です。
今回も前回と同じくJavaScriptについてお仕事で触れたものを紹介したいと思います。

はじめに

皆さんはPromiseをご存じでしょうか。
Promiseというのは「非同期処理の結果を表せるオブジェクト」です。
Promiseを使うことで、非同期処理を読みやすく管理しやすくなります。
今回はそのPromiseについて調べながら書いてみました。

3つの状態

まず、非同期処理には3つの状態があります。
・pending(処理待機中) → 処理がまだ終わってない状態
・resolve(処理成功) → 処理が成功して値が返ってきた状態
・reject(処理失敗) → 処理が失敗した状態

上記三つを念頭に置いて以下のコードを書いてみます。

let promise = new Promise((resolve,reject) => {
    resolve("成功!");
    reject("失敗!")
})

上記はpromiseの処理が成功した場合は 成功! を出力し、
失敗した場合は 失敗! を出力するコードです。

then,catch,finally

次にthen,catch,finallyを紹介します。

.then()は処理(promise)の結果を取得します。
.catch()は処理(promise)のエラー処理を記述します。
.finally()は後処理を記述します。

先ほどのコードに追記してみます。

let promise = new Promise((resolve,reject) => {
    resolve("成功!");
    reject("失敗!")
});

///　ここから下が追加する処理

promise
    .then(result => {
        console.log(result);　// → 成功!
    })
    .catch(result => {
        console.log(reject);　// → 失敗!
    })
    .finally(() => {
        console.log("処理が終了しました!");　// → 処理が終了しました!
    })

処理(promise)が成功(resolve)したときは.then()により
"成功!"が出力されます。

一方、処理(promise)が失敗(reject)したときは.catch()により
"失敗!"が出力されます。

最後に成功失敗関係なく、.finally()により"処理が終了しました!"を出力します。

以上がPromiseの使い方となります。

Promiseのチェーン

ここからはお仕事では使いませんでしたが、変わった書き方があったので紹介します。
上で使用した.then()を繋げることで非同期処理を順番に実行できます。

let promise = new Promise((resolve,reject) => {
    resolve(1);
});

promise
    .then(result => {
        console.log(result); // → 1
        return result + 1
    })
    .then(result => {
        console.log(result) // → 2
        return result + 2
    })
    .then(result => {
        console.log(result) // → 4
    });

以上です。

終わりに

Promiseを活用すれば非同期処理も見やすくわかりやすいコードが書けそうですね。
今後非同期処理を触る機会があったらこのPromiseを活用してみようと思います。
以上、塚田でした。