研究ノート-ES6のPromiseオブジェクトの詳細な説明

ES6には、newで使用できる重要なオブジェクトPromiseがあります。将来何が起こるかを表し、非同期操作の結果を説明するために使用されます。この関数には、多くの場合、非同期で時間のかかるコードが含まれています。

1. Promiseの基本構成：

{              挂起      成功        失败
    status: 'pending | fulfilled | rejected', // status最多只能变化一次
    // 状态的改变只有两种可能：pending -> fulfilled, pending -> rejected
    data: undefined,    // 需要携带的数据，没有默认undefined
    success: null,      // 成功的回调函数
    failure: null,      // 失败的回调函数
    then: function(fn, fn2) {
        this.success = fn;
        this.failure = fn2;
    },
    resolve: function(data) { 获取一个成功状态的promise
        this.data = data;
        this.status = "fulfilled";
    },
    reject: function(data) { 获取一个失败状态的promise
        this.data = data;
        this.status = "rejected";
    }
}

利点：非同期コードは同期プロセスで表されます。地獄のコールバックを避けてください（コールバック関数はレイヤーにネストされています）。

短所：作成後にキャンセルすることはできず、コールバック関数を設定する必要があります。

2. Promiseオブジェクトの作成：

var p =  new Promise(function(resolve,reject) {
    setTimeout(function() {
        
    }, 2000);
}).then(function(data) => {})
  .catch(function(data) => {});

Catchは本質的に特別なthen関数です（最初のパラメーターはnullで、2番目のパラメーターは関数です）。Promiseのthen関数とcatch関数は、常に新しいpromiseオブジェクトを返します。このようにして、thenを続行でき、Promiseは次のように規定します。前のthenパラメーター関数の戻り値は、パラメーターとして次のパラメーター関数に渡されます。thenに指示がない場合は、失敗したPromiseが返されます。または例外が発生した場合、then関数とcatch関数は常に成功したPromiseを返します。

Promise.resolve(123).then(data => { console.log(data); return Promise.resolve(456) }) 
// data 123
                    .then(data => { console.log(data); return Promise.reject(789) })  
// data 456
                    .catch(data => { console.log(data); }) // data 789

3. Promiseのメソッド（まだ使用されていません）：

Promise.all（[p1、p2、p3]）は、複数のPromiseインスタンスを新しいPromiseオブジェクトにラップします。パラメータは必ずしも配列ではありません

Promise.all（[p1、p2、p3]）のステータスは、次の2つのケースに分けられます。

p1、p2、およびp3の状態がすべて満たされる場合にのみ、pの状態が満たされます。このとき、p1、p2、およびp3の戻り値は配列を形成し、それがコールバック関数に渡されます。 pの。

p1、p2、およびp3のいずれかが拒否される限り、pのステータスは拒否され、最初に拒否されたインスタンスの戻り値はpのコールバック関数に渡されます。

// 第一种情况,全是成功状态
var p1 = new Promise((resolve, reject) => { let data = 10; resolve(data) });
var p2 = new Promise((resolve, reject) => { let data = 100; resolve(data) });
var p =  Promise.all([ p1, p2 ]);
p.then((datas) => { console.log(datas); });    // [10, 100]

// 第二种情况, 有一个是失败状态
var p1 = new Promise((resolve, reject) => { let data = 10; resolve(data) });
var p2 = new Promise((resolve, reject) => { let data = 100; reject(data) });
var p =  Promise.all([ p1, p2 ]);
p.then((datas) => { console.log(datas); }).catch((datas) => { console.log(datas); });// 100

Promise.raceメソッドは、複数のPromiseインスタンスを新しいPromiseインスタンスにラップします。

Promise.race（[p1、p2、p3]）内のオブジェクトの状態が最初に変化する限り、その状態はそれに応じて変化します。最初に変更されたPromiseインスタンスの戻り値は、その戻り値に渡されます。

また、Promise.all（）メソッドとPromise.race（）メソッドのパラメーターがPromiseオブジェクトでない場合は、Promise.resolveメソッドとPromise.rejectメソッドが最初に呼び出されます。

var p1 = Promise.resolve('成功了');
p1.then(data => { console.log(data); }); 	// 成功了

var p1 = Promise.reject('失败了');
p1.then(null, data => { console.log(data); }); 	// 失败了

Promiseオブジェクトは、非同期で時間のかかる操作を説明するためによく使用されます。また、Promiseオブジェクトを使用して、Ajaxといくつかの時間のかかる非同期操作をカプセル化します。コードをよりエレガントにします。

研究ノート-ES6のPromiseオブジェクトの詳細な説明

おすすめ