ES6 Essentials 11-プロミスの基本的な使い方

Promiseオブジェクトとは？

• 将来終了するイベントの結果を保持するコンテナに相当
• さまざまな非同期操作は、axiosと同じ方法で処理できます。

プロミスの特徴：

• オブジェクトの状態は外部から影響を受けない 非同期操作の処理 3つの状態 Pending（進行中） Resolved（成功） Rejected（失敗）
• 一度状態が変われば、二度と変わることはありません。

概要を説明するスクリーンショット：

• catch メソッド: の例外をキャッチします。
• then method: 保留状態から解決状態への遷移を示します。
• catch メソッド：保留状態から拒否状態への遷移を示します。

Promiseプロミスの具体的な実装は

次のコード例をご覧ください。

let pro = new Promise(function(resolved,rejected) {
//非同期処理を行う
let res = {
 code: 201,
 data:{
 name:'ポニーボーイの
 },
 error:'失敗した
}
setTimeout(() => 
{
 if(res.code === 200)
 {
 resolved(res.data); //
    1. ここでは、解決後、パラメータres.dataはthen関数の最初のパラメータとなる。
 }
 else
 {
 rejected(res.error);//
    2. ここでのエラーはthen関数の2番目のパラメータになる。
 }
 }, 1000);
})
 
console.log(pro);
pro.then((val)=>{
 console.log(val); //
    3. 上記resのコードが200の場合、ここに進み、戻り値はdataオブジェクトである。
},(err)=>{
 console.log(err);//上記resのコードが200でない場合、errに進み、戻り値は "Failed "となる。” 
});

リクエストの流れを整理します：

• の位置で、解決された後、パラメータres.dataはthen関数の最初のパラメータになります。
• の位置で、リジェクトした後、エラーは関数の2番目のパラメータになります。
• 上記resのコードが200の場合はこちらへ、返される値はデータオブジェクトです。
• 上記resのコードが200でない場合、エラーとなり、"failed "が返されます。

Promiseを使ったリクエスト送信

function timeOut(ms) {
 return new Promise((resolved,rejected)=>{
 setTimeout(() => {
 resolved('hello promise success!!')
 }, ms);
 })
}
//非同期にデータをリクエストし、valの値を取得する。
 timeOut(2000).then((val)=>{
 console.log(val);
 })

• 関数の中で newPromiseをラップする。