JSのPromiseの基本について調べてみた

背景

Axiosを使おうとした際にAxiosのREADMEに「Promise based HTTP client for the browser and node.js」とあり、
そもそもPromiseってなあに？となったためPromiseの概要についてまとめてみました！

※新卒1年目で知識も浅いため、内容には間違いがある場合があります💦

Promiseの基本

そもそもPromiseとは、日本語に訳すと「約束」です。

JSのPromiseも同じで処理における約束を決めるものになります。
つまり　①約束を守った場合、➁約束を破った場合の処理をそれぞれ記述することができるものです。

Promiseのステータス

待機状態　　　　　　　⇒　pending
成功（約束を守った）　⇒　resolved
失敗（約束を破った）　⇒　rejected

Promiseのインスタンス化

Promiseをインスタンス化する際には、引数に何を入れるかは決まっています！
▶第1引数にはresolve（約束を守った場合）のコールバック関数
▶第2引数にはreject（約束を破った場合）のコールバック関数
を書きます。
ただ、第2引数のrejectは省略可能になるので、約束破る場合なんかないよってときは記述しなくても大丈夫です。

引数の取り方は、無名関数またはアロー関数のどちらでもOKみたいです◎

promiseTest.js

// 無名関数を利用する場合
const condition = true;
const promise = new Promise(function(resolve,reject){
    if(condition) {
        resolve('やくそくまもりました。')
    } else {
        reject('やくそくわすれてました。')
    }
})

// アロー関数を利用する場合
let promise = new Promise((resolve, reject) => {  
    if(condition) {
        resolve('やくそくまもりました。')
    } else {
        reject('やくそくわすれてました。')
    }
});

Promiseの結果の値を取得する

結果の取り方はシンプルです！
resolve（約束を守った場合）：　.then()
reject（約束を破った場合）：　.catch()
thenもcatchもカッコの中には無名関数が入り、その無名関数の中の引数がPromiseの結果の値となります。
この引数の変数名は自由に付けることができるので、どのような結果が返ってくるのかによって適した名前にすることができます。

上記のサンプルコード（promiseTest.js）であれば、以下が結果として返ることになります。
then ⇒　'やくそくまもりました。'
catch ⇒　'やくそくわすれてました。'

// resolveの結果
promise.then(function(result){
    console.log(result)
})

// rejectの結果
promise.catch(function(result){
    console.log(result)
})

Promiseを複数使う

Promiseは複数作り、連結することが可能です。
Promiseを連結することで、処理を実行した後でその実行結果を次の処理に渡すこともできます。

// 条件の定義
const condition_1 = true;
const condition_2 = true;

// 約束１
const promise1 = new Promise(function(resolve,reject){
    if(condition_1) {
        resolve('約束１_OK')
    } else {
        reject('約束１_NG')
    }
})

// 約束２
const promise2 = function(result_promise1){
    return new Promise(function(resolve,reject){
        if (condition_2){
            resolve(result_promise1 + ',' + '約束２_OK')
        } else {
            reject(result_promise1 + ',' + '約束２_NG')
        }
    })
}

promise1
  .then(promise2) // promise1がresolveの場合の結果をpromise2に渡した後、promise2を実行
  .then(function (result_promise2) {  // promise2がresolveの場合の結果
    console.log(result_promise2)
  })
  .catch(function (result_promise1) {  //promise1がrejectの場合の結果
    console.log(result_promise1)
  })

実行結果

１. condition_1 = true、condition_2 = trueの場合

約束１_OK, 約束２_OK

２. condition_1 = true、condition_2 = falseの場合

約束１_OK, 約束２_NG

３. condition_1 = false、condition_2 = trueの場合
condition_1がfalseの時点でcatchされるため、promise2の処理は実行されていません。

約束１_NG

４. condition_1 = false、condition_2 = falseの場合
condition_1がfalseの時点でcatchされるため、promise2の処理は実行されていません。

約束１_NG

参考文献

執筆にあたり参考にさせていただいたサイトは以下になります。

【JavaScriptのPromiseって何？を解決したい】
https://reffect.co.jp/html/promise-is-what#JavaScriptPromise