混子前端所知道關於ES6的Promise

時間 2019-11-17

標籤混子前端知道關於 es6 promise 欄目 JavaScript 简体版

原文原文鏈接

Promise是異步編程的一種解決方案，比傳統的解決方案 [ 回調函數和事件] 更合理也更強
大。
---本文摘選阮一峯《ECMAScript 6 標準入門》

Promise的含義

混子前端認爲 Promise 簡單來講就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。javascript

Promise對象有如下兩個特色：前端

對象的狀態不受外界影響：
Promise表明一個異步操做，有三種狀態：
Pending：進行中
Resolved：已完成，又稱Fulfilled
Rejected：已失敗
只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。
一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。
Promise對象的狀態改變，只有兩種可能：
1. 從Pending變爲Resolved
2. 從Pending變爲Rejected
只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。

有了Promise對象就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

固然混子前端認爲Promise也有一些缺點：

沒法取消Promise，一旦新建它就會當即執行，沒法中途取消。
若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
當處於Pending狀態時，沒法得知目前進展到哪個階段。

基本用法

ES6規定，Promise對象是一個構造函數，用來生成Promise實例，來看代碼：
java

JS code:

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

複製代碼

說明：Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是 resolve 和 reject。

resolve函數：將Promise對象的狀態從「未完成」變爲」成功「（即從Pending變爲Resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；
reject函數：將Promise對象的狀態從「未完成」變爲「失敗」（即從Pending變爲Rejected），在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

Promise實例生成之後，能夠用then方法分別指定Resolved狀態和Reject狀態的回調函數，來看代碼：面試

JS code:

promise.then(function(value) {

    // success

}, function(error) {

    // failure

});

複製代碼

說明：then方法能夠接受兩個回調函數做爲參數。第一個回調函數是Promise對象的狀態變爲Resolved時調用，第二個回調函數是Promise對象的狀態變爲Reject時調用。其中，第二個函數是可選的，不必定要提供。

利用Promise咱們能夠模擬不少場景，混子前端來用Promise實現咱們項目中經常使用異步加載圖片和實現Ajax操做。ajax

下面是異步加載圖片的例子，來看代碼：編程

JS code:

function loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image);
        };

        image.onerror = function() {
            reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
    });
}
 複製代碼

說明：使用Promise包裝了一個圖片加載的異步操做。若是加載成功，就調用 resolve 方法，不然就調用 reject 方法。json

接下來是一個用Promise對象實現Ajax操做的例子，來看代碼：數組

JS code:

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);
});
 複製代碼

說明：getJSON 是對 XMLHttpRequest 對象的封裝，用於發出一個針對JSON數據的HTTP請求，而且返回一個Promise對象。

Promise.prototype.then()

Promise實例具備 then 方法，then 方法是定義在原型對象Promise.prototype上的。

它的做用是爲Promise實例添加狀態改變時的回調函數。promise

then方法接受兩個參數：
bash

Resolved狀態的回調函數
（可選）是Rejected狀態的回調函數

then 方法返回的是一個新的Promise實例（ps：不是原來那個Promise實例），所以能夠採用鏈式寫法，即 then 方法後面再調用另外一個 then 方法，來看代碼：

JS code:

getJSON("/posts.json").then(function(json) {
    return json.post;
}).then(function(post) {
    // ...
}); 複製代碼

說明：代碼使用then方法，依次指定了兩個回調函數，第一個回調函數完成之後，會將返回結果做爲參數，傳入第二個回調函數。

採用鏈式的 then，能夠指定一組按照次序調用的回調函數。這時，前一個回調函數，有可能返回的仍是一個Promise對象（即有異步操做），這時後一個回調函數，就會等待該Promise對象的狀態發生變化，纔會被調用。

接下來看一下可選參數的回調函數，來看代碼：

JS code：

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) 的別名，用於指定發生錯誤時的回調函數，來看代碼：

JS code:

getJSON("/posts.json").then(function(posts) {
    // ...
}).catch(function(error) {
    // 處理 getJSON 和 前一個回調函數運行時發生的錯誤
    console.log('發生錯誤！', error);
});
複製代碼

說明：getJSON 方法返回一個Promise對象，若是該對象狀態變爲

Resolved ，則會調用 then 方法指定的回調函數；若是異步操做拋出錯誤，狀態就會變爲

Rejected ，就會調用

catch 方法指定的回調函數，處理這個錯誤。另外， then 方法指定的回調函數，若是運行中拋出錯誤，也會被

catch 方法捕獲。

Promise.all()

Promise.all 方法用於將多個Promise實例，包裝成一個新的Promise實例，來看代碼：

JS code:

var p = Promise.all([p1, p2, p3]);
複製代碼

說明：Promise.all 方法接受一個數組做爲參數，p一、p二、p3 都是Promise對象的實例，若是不是，就會先調用下面講到的 Promise.resolve 方法，將參數轉爲Promise實例，再進一步處理。Promise.all 方法的參數能夠不是數組，但必須具備Iterator接口，且返回的每一個成員都是Promise實例。

這裏p的狀態由p一、p二、p3 決定，分紅兩種狀況：

只有 p一、p二、p3 的狀態都變成 fulfilled，p 的狀態纔會變成

fulfilled ，此時的返回值組成p一、p二、p3 一個數組，傳遞給 p 的回調函數。
只要 p一、p二、p3 之中有一個被

rejected，p 的狀態就變成

rejected，此時第一個被reject的實例的返回值，會傳遞給 p 的回調函數。

來看例子：

JS code:

// 生成一個Promise對象的數組
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
    return getJSON("/post/" + id + ".json");
});

Promise.all(promises).then(function (posts) {
    // ...
}).catch(function(reason){
    // ...
});
複製代碼

說明：promise 是包含6個Promise實例的數組，只有這6個實例的狀態都變成 fulfilled，或者其中有一個變爲

rejected ，纔會調用 Promise.all 方法後面的回調函數。

Promise.race()

Promise.race 方法一樣是將多個Promise實例，包裝成一個新的Promise實例，來看代碼：

JS code:

var p = Promise.race([p1, p2, p3]);複製代碼

說明：只要 p一、p二、p3 之中有一個實例率先改變狀態，p 的狀態就跟着改變。那個率先改變的 Promise 實例的返回值，就傳遞給 p 的回調函數。

Promise.race 方法的參數與 Promise.all 方法同樣，若是不是 Promise 實例，就會調用Promise.resolve 方法，將參數轉爲 Promise 實例，再作處理。

Promise.resolve()

有時須要將現有對象轉爲Promise對象，Promise.resolve 方法就起到這個做用，來看例子：

JS code:

var jsPromise = Promise.resolve($.ajax('/whatever.json'));
複製代碼

說明：上面代碼將jQuery生成的 deferred 對象，轉爲一個新的Promise對象。

Promise.resolve 方法的參數分紅四種狀況。

參數是一個Promise實例
若是參數是Promise實例，Promise.resolve 將不作任何修改、原封不動地返回這個實例。
參數是一個 thenable 對象
thenable 對象指的是具備 then 方法的對象，來看代碼：

JS code:

let thenable = {
    then: function(resolve, reject) {
        resolve(2);
    }
};
複製代碼

說明： Promise.resolve 方法會將這個對象轉爲 Promise 對象，而後就當即執行

thenable 對象的 then 方法。

參數不是具備

then 方法的對象，或根本就不是對象

若是參數是一個原始值，或者是一個不具備 then 方法的對象，則 Promise.resolve

方法返回一個新的Promise對象，狀態爲 Resolved，來看代碼：

JS code:

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

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

// Hello複製代碼

說明：字符串「Hello」不屬於異步操做，返回Promise實例的狀態從一輩子成就是 Resolved ，因此回調函數會當即執行。

不帶有任何參數
Promise.resolve 方法容許調用時不帶參數，直接返回一個 Resolved 狀態的Promise對象。

Promise.reject()

Promise.reject(reason) 方法也會返回一個新的Promise實例，該實例的狀態爲 rejected 。它的參數用法與 Promise.resolve 方法徹底一致，來看代碼：

JS code:

var p = Promise.reject('出錯了');

// 等同於:
var p = new Promise((resolve, reject) => reject('出錯了'))

p.then(null, function (s){
    console.log(s)
});
// 出錯了
複製代碼

說明：生成一個Promise對象的實例p，狀態爲 rejected，回調函數會當即執行。

兩個有用的附加方法

done()

說明：Promise對象無論以 then

方法或 catch

方法結尾，要是最後一個方法拋出錯誤，都有可能沒法捕捉到（由於Promise內部的錯誤不會冒泡到全局）所以，提供一個 done 方法，老是處於回調鏈的尾端，保證拋出任何可能出現的錯誤，來看代碼：

JS code:

Promise.prototype.done = function (onFulfilled, onRejected) {
    this.then(onFulfilled, onRejected)
        .catch(function (reason) {
      	    // 拋出一個全局錯誤
            setTimeout(() => { throw reason }, 0);
    	});
};
複製代碼

說明：done 方法的使用，能夠像 then 方法那樣用，提供 Fulfilled

和 Rejected

狀態的回調函數，也能夠不提供任何參數。但無論怎樣 done 都會捕捉到任何可能出現的錯誤，並向全局拋出。

finally()

finally 方法用於指定無論Promise對象最後狀態如何，都會執行的操做。
與 done 方法的最大區別：它接受一個普通的回調函數做爲參數，該函數必須執行。
來看代碼：

JS code:

server.listen(0)
    .then(function () {
       // run test
    })
    .finally(server.stop);

複製代碼

手寫Promise

文章的最後，給你們手寫一個不論是面試仍是技術探討都會常常提到的手寫promise，其實總結上面相信你們也都能寫出來，來看代碼：

JS code:

function myPromise(constructor){
    let self = this;
    self.status = 'pending';	// 定義狀態改變前的初始狀態
    self.value = undefined;    // 定義狀態爲resolved時候的狀態
    self.reason = undefined;    // 定義狀態爲rejected時候的狀態

    function resolve(value) {
        if(self.status === 'pending'){    // 兩個函數判斷等於pending, 保證了狀態的改變是不可逆的
	    self.value = value;
	    self.status = 'resolved';
        }
    }

    function reject(reason) {
        if(self.status === 'pending'){    // 兩個函數判斷等於pending, 保證了狀態的改變是不可逆的
	    self.value = reason;
	    self.status = 'rejected';
	}
    }

    // 捕獲構造異常
    try{
        constructor(resolve, reject);
    }catch{    
        reject(e);
    }

}

myPromise.prototype.then = function(onFullfilled, onRejected){
    let self = this;
    switch(self.status){
    case 'resolved':
        onFullfilled(self.value);
        break;
    case 'rejected':
        onRejected(self.reason);
	break;
    }
}


var p = new myPromise(function(resolve, reject){
    resolve(1)
});

p.then(function(x){
    console.log(x)
});
複製代碼