1. 程式人生 > >ES6中的Promise物件小結

ES6中的Promise物件小結

Promise是一種非同步程式設計的解決方案,ES6提供原生的Promise,它比傳統的解決方案,回撥函式和事件,更加合理和強大。

Promise物件有以下兩個特點:

1、物件的狀態不受外界影響。Promise物件代表一個非同步操作,有三種狀態:pending, resolved, rejected。只有非同步操作的結果,可以決定是哪一種狀態。

2、狀態一旦改變,就不會再變化,並且任何時候都可以得到這個結果。

實用Promise物件,可以將非同步操作用同步操作的流程表達出來,避免了層層巢狀的回撥函式。

基本用法

var promise = new Promise(function
(resolve, reject) { // ... some code if (/* 非同步操作成功 */){ resolve(value); } else { reject(error); } });

注意,函式resolve, reject由JS引擎提供,不用自己部署。

resolve函式的作用是將Promise物件的狀態從“未完成”變為“成功”(即從 Pending 變為 Resolved),在非同步呼叫成功的時候使用,並將非同步操作的結果作為引數傳遞出去;reject函式將Promise物件的狀態從“未完成”變為“失敗”(即從 Pending 變為 Rejected),在非同步操作失敗時呼叫,並將非同步操作報出的錯誤作為引數傳遞出去。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Promise例項生成以後,可以用then方法分別指定Resolved狀態和Rejected狀態的回撥函式。

一個完整的例子:

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console
.log(value); })
;

timeout方法返回一個Promise例項。當Promise例項的狀態變為Resolved,就會觸發then方法繫結的回撥函式。

另外,Promise物件在新建後就會立即執行。

下面是用Promise物件實現Ajax的例子:

var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出錯了', error);
});

Promise“巢狀”

如果呼叫resolve函式和reject函式時帶有引數,那麼它們的引數會被傳遞給回撥函式。
reject函式的引數通常是Error物件的例項,表示丟擲的錯誤;resolve函式的引數除了正常的值以外,還可能是另一個 Promise 例項:

var p1 = new Promise(function (resolve, reject) {
  // ...
});

var p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面程式碼中,p1和p2都是 Promise 的例項,
但是,重要的來了,p2的resolve方法將p1作為引數,即一個非同步操作的結果是返回另一個非同步操作。

這時,p1的狀態就會傳遞給p2,也就是說,p1的狀態決定了p2的狀態。如果p1的狀態是Pending,那麼p2的回撥函式就會等待p1的狀態改變;如果p1的狀態已經是Resolved或者Rejected,那麼p2的回撥函式將會立刻執行。

注意,呼叫resolve或reject並不會終結 Promise 的引數函式的執行。

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

Promise.prototype.then()

then方法的作用是為 Promise 例項新增狀態改變時的回撥函式。前面說過,then方法的第一個引數是Resolved狀態的回撥函式,第二個引數(可選)是Rejected狀態的回撥函式。

then方法可以鏈式呼叫。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function funcA(comments) {
  console.log("Resolved: ", comments);
}, function funcB(err){
  console.log("Rejected: ", err);
});

上面程式碼中,第一個then方法指定的回撥函式,返回的是另一個Promise物件。這時,第二個then方法指定的回撥函式,就會等待這個新的Promise物件狀態發生變化。如果變為Resolved,就呼叫funcA,如果狀態變為Rejected,就呼叫funcB。

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名,用於指定發生錯誤時的回撥函式。

另外,then方法指定的回撥函式,如果執行中丟擲錯誤,也會被catch方法捕獲。

Promise.resolve()

Promise.resolve()可以將現有物件轉化為Promise物件。

等價於:

Promise.resolve('foo')
// 等價於
new Promise(resolve => resolve('foo'))

Promise.resolve方法的引數分成四種情況。

1、引數是一個Promise例項

如果引數是Promise例項,那麼Promise.resolve將不做任何修改、原封不動地返回這個例項。

2、引數是一個thenable物件

thenable物件指的是具有then方法的物件,比如下面這個物件。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve方法會將這個物件轉為Promise物件,然後就立即執行thenable物件的then方法。

3、引數不是具有then方法的物件,或根本就不是物件

如果引數是一個原始值,或者是一個不具有then方法的物件,則Promise.resolve方法返回一個新的Promise物件,狀態為Resolved。

var p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

4、不帶有任何引數

Promise.resolve方法允許呼叫時不帶引數,直接返回一個Resolved狀態的Promise物件。

所以,如果希望得到一個Promise物件,比較方便的方法就是直接呼叫Promise.resolve方法。

需要注意的是,立即resolve的Promise物件,是在本輪“事件迴圈”(event loop)的結束時,而不是在下一輪“事件迴圈”的開始時。

Promise.reject()

Promise.reject(reason)方法也會返回一個新的 Promise 例項,該例項的狀態為rejected。