圖片.png

『ES6腳丫系列』Promise

Promise

文本主要內(nèi)容如下：

* Promise是什么晚岭？

* 1.1 特點：

* 1.2 三種狀態(tài)：

* 1.3 用處：

* 1.4 Promise缺點：

* 1.5 歷史過程

* 2 生成promise實例

* 3 promise實例的then()方法

* 4 resolve函數(shù)的參數(shù)可以是另一個Promise實例

* 5 Promise的方法（多種）

* 5.1 Promise.all()

* 5.2 Promise.race()

* 5.3 Promise.reject(reason)

* 5.4 Promise.resolve(obj)

* 6 Promise.prototype.catch()的概念

* 6.1 盡量不定義then的reject方法

* 6.2 catch方法返回的還是一個Promise對象，因此后面還可以接著調(diào)用then方法。

* 7

* 7.1 如果前面的promise和then()沒有報錯胜嗓，則會跳過catch方法拓诸。

* 7.2 拋錯的冒泡性質(zhì)

* 7.2.1 如果Promise狀態(tài)已經(jīng)變成resolved绍昂，再拋出錯誤是無效的鳖悠。

* 7.2.2 Promise在下一輪“事件循環(huán)”再拋出錯誤

* 7.2.3 如果沒有處理錯誤的回調(diào)函數(shù)拓瞪，就沒有反應(yīng)

* 7.2.4 catch方法之中官份，還能再拋出錯誤只厘。

* 8 node.js的unhandledRejection

* 9 done()

* 10 finally()

Promise是什么？

01舅巷、是一個對象羔味，用來傳遞異步操作的消息。

特點：

01钠右、對象的狀態(tài)不受外界影響赋元。
02、代表一個異步操作飒房。

三種狀態(tài)：

Pending（進行中）

Resolved（已完成搁凸，又稱Fulfilled）

Rejected（已失敗）狠毯。

（1）默認的Promise對象是等待態(tài)（Pending）护糖。

只有異步操作的結(jié)果，可以決定當前是哪一種狀態(tài)嚼松，任何其他操作都無法改變這個狀態(tài)嫡良。

這也是Promise這個名字的由來，它的英語意思就是“許諾”献酗，表示其他手段無法改變寝受。

（2）一旦狀態(tài)改變了，就不會再變了罕偎，會一直保持這個結(jié)果很澄。

任何時候都可以得到這個結(jié)果。

Promise對象的狀態(tài)改變颜及，只有兩種：

從Pending變?yōu)镽esolved痴怨。

從Pending變?yōu)镽ejected。

這與事件（Event）不同器予，事件的特點是浪藻，如果你錯過了它，再去監(jiān)聽乾翔，是得不到結(jié)果的爱葵。

用處：

用Promise對象可以將異步操作以同步操作的流程表達出來施戴，避免了層層嵌套的回調(diào)函數(shù)。

可以判斷多個異步事件的完成萌丈，

Promise缺點：

無法取消Promise赞哗，一旦新建它就會立即執(zhí)行，無法中途取消辆雾。

如果不設(shè)置回調(diào)函數(shù)肪笋，Promise內(nèi)部拋出的錯誤，不會反應(yīng)到外部度迂。

當處于Pending狀態(tài)時藤乙，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

歷史過程

生成promise實例

Promise是一個構(gòu)造函數(shù)惭墓，可以生成Promise實例坛梁。

接受一個函數(shù)A作為參數(shù)，該函數(shù)A有2個參數(shù)腊凶，是resolve和reject(拒絕)划咐，它們是函數(shù)，由JS引擎提供钧萍，不用自己部署褐缠。

resolve(value)函數(shù)的作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸腜ending變?yōu)镽esolved）风瘦，在異步操作成功時被調(diào)用队魏，并將異步操作的結(jié)果，作為自己的參數(shù)弛秋。

reject(error)函數(shù)的作用是器躏，將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆　保磸腜ending變?yōu)镽ejected）俐载，在異步操作失敗時調(diào)用蟹略，并將異步操作報出的錯誤，作為自己的參數(shù)遏佣。

reject函數(shù)的參數(shù)通常是Error對象的實例挖炬，表示拋出的錯誤。

例子：

reject(new Error(this.statusText));

在promise實例的構(gòu)造函數(shù)中状婶，可以只返回resolve(value)或reject(error)意敛；

例子：

let pro = new Promise((resolve,reject)=>{resolve(value)});

寫法：

創(chuàng)造了一個Promise實例。

const promise = new Promise(function(resolve, reject) {
    if ( /* 異步操作成功 */ ) { resolve(value); }     else { reject(error); }
});
復制代碼

promise實例的then()方法

這個方法在實例的狀態(tài)改變時會觸發(fā)它的參數(shù)函數(shù)膛虫。

當promise實例轉(zhuǎn)為成功(Resolved)狀態(tài)時草姻，觸發(fā)then()的第一個函數(shù)參數(shù)。

當promise實例轉(zhuǎn)為失敗(Rejected)狀態(tài)時稍刀，觸發(fā)then()的第二個函數(shù)參數(shù)撩独。（第二個函數(shù)參數(shù)可選）

這兩個函數(shù)參數(shù)都接受promise實例傳出的值作為參數(shù)敞曹。也就是resolve(value)和reject(value)的value值。

then()方法是定義在原型對象Promise.prototype上的综膀，被所有promise實例繼承澳迫。

promise.then(
    function (value) { // success
    },
    function (value) { // failure
    }
);
復制代碼

箭頭函數(shù)方式：

promise.then( (value)=>{}, (error)=>{} )

如果then()中有設(shè)置新的promise實例，則then()方法返回這個promise對象剧劝。

否則將默認構(gòu)建一個新的promise對象橄登，并繼承調(diào)用then()方法的promise的狀態(tài)（成功或失敗）讥此。

then方法return返回的是一個新的Promise實例（注意拢锹，不是原來那個Promise實例）。

因此可以采用鏈式寫法暂论，即then方法后面再調(diào)用另一個then方法面褐。

這個函數(shù)返回undefined，則then()方法構(gòu)建一個默認的Promise對象取胎，并且這個對象擁有then()方法所屬的Promise對象的狀態(tài)展哭。

var p = new Promise(function (resolve) {
        resolve();//直接標志執(zhí)行態(tài)
    }), temp;
temp = p.then(function () {
        //傳入執(zhí)行態(tài)函數(shù)，不返回值
    });
 temp.then(function () {
        console.log('fulfilled');//擁有p的狀態(tài)
    });
console.log(temp === p);//默認構(gòu)建的promise闻蛀，但已經(jīng)和p不是同一個對象匪傍，輸出false復制代碼

如果對應(yīng)狀態(tài)所執(zhí)行的函數(shù)返回一個全新的Promise對象，則會覆蓋掉當前Promise觉痛，代碼如下：

    var p = new Promise(function (resolve) {
        resolve();//直接標志執(zhí)行態(tài)
    }), temp;
    temp = p.then(function () {
        //返回新的promise對象役衡，和p的狀態(tài)無關(guān)
        return new Promise(function (resolve, reject) {
            reject();//標志拒絕態(tài)
        });
    });
    temp.then(function () {
        console.log('fulfilled');
    }, function () {
        console.log('rejected');//輸出rejected
    });復制代碼

resolve函數(shù)的參數(shù)可以是另一個Promise實例

表示當前異步操作的取決于另一個異步操作的結(jié)果。

舉個例子來說薪棒，張三到李四家拿鑰匙手蝎，取決于李四在家不在家。

如果李四在家俐芯，那么張三可以成功拿到鑰匙棵介。如果李四不在家，張三就拿不到鑰匙吧史。

有2個promise實例p1和p2邮辽，

p2的resolve(p1)，那么贸营，p1的狀態(tài)決定了p2的狀態(tài)吨述。

如果p1的狀態(tài)是Pending，那么p2的回調(diào)函數(shù)就會等待p1的狀態(tài)改變钞脂，在此之前不會有結(jié)果揣云。

如果p1的狀態(tài)已經(jīng)是Resolved或者Rejected，那么p2的回調(diào)函數(shù)將會立刻執(zhí)行冰啃。

比如像下面這樣邓夕。

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

例子：

p1是一個Promise肋层，3秒之后變?yōu)閞ejected。p2的狀態(tài)由p1決定翎迁，1秒之后栋猖，p2調(diào)用resolve方法，但是此時p1的狀態(tài)還沒有改變汪榔，因此p2的狀態(tài)也不會變蒲拉。又過了2秒，p1變?yōu)閞ejected痴腌，p2也跟著變?yōu)閞ejected雌团。

var p1 = new Promise(function(resolve, reject) {
    setTimeout(() => reject(new Error('fail')), 3000);
});

var p2 = new Promise(function(resolve, reject) {
    setTimeout(() => resolve(p1), 1000)
});
p2.then(result => console.log(result))
p2.catch(error => console.log(error))
    // Error: fail
復制代碼

例子：

下面是一個Promise對象的簡單例子。

timeout函數(shù)中士聪，會返回新生成的Promise實例锦援，其中，定時器setTimeout會在100ms后調(diào)用resolve("done")剥悟；當調(diào)用resolve后灵寺，觸發(fā)then綁定的回調(diào)函數(shù)。

吃碼小妖：'done'是resolve的參數(shù)区岗。

等效于：

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve("done"),ms);
    });
}
timeout(100).then((value) => {
    console.log(value);
});
復制代碼

例子：

下面是異步加載圖片的例子略板。

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對象實現(xiàn)的Ajax操作的例子。

getJSON是對XMLHttpRequest對象的封裝慈缔，用于發(fā)出一個針對JSON數(shù)據(jù)的HTTP請求叮称，并且返回一個Promise對象。

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);
});復制代碼

箭頭函數(shù)寫法：

getJSON("/post/1.json").then(
    post => getJSON(post.commentURL)).then(
    comments => console.log("Resolved: ", comments),
    err => console.log("Rejected: ", err));
復制代碼

Promise的方法（多種）

Promise.all()

用于將多個Promise實例藐鹤，包裝成一個新的Promise實例瓤檐。

接受一個數(shù)組作為參數(shù)，數(shù)組元素都是Promise實例娱节。

如果參數(shù)不是Promise實例挠蛉，會調(diào)用Promise.resolve()轉(zhuǎn)變?yōu)镻romise實例。

Promise.all()方法的參數(shù)不一定是數(shù)組括堤，但是必須具有iterator接口碌秸，且返回的每個成員都是Promise實例绍移。

返回的新的Promise實例的狀態(tài)：

• 所有Promise參數(shù)的都變成Resolved悄窃，p的狀態(tài)才會變成Resolved，參數(shù)的返回值組成一個數(shù)組蹂窖，傳遞給p的回調(diào)函數(shù)轧抗。
• 只要有一個參數(shù)被rejected，p的狀態(tài)就變成rejected瞬测，此時第一個reject的實例的返回值横媚，會傳遞給p的回調(diào)函數(shù)纠炮。

（小z：類似于且操作，且假或真灯蝴，只有所有的是成功的才可以恢口。你想想，一系列的操作只有都成功才叫成功穷躁。）

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

例子

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

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

Promise.race()

race：賽跑耕肩。

將多個Promise實例，包裝成一個新的Promise實例问潭。

返回這個新promise實例猿诸，新promise實例的狀態(tài)為第一個改變的參數(shù)實例的狀態(tài)。它的值也是該參數(shù)實例傳遞出來的值狡忙。

參數(shù)如果不是Promise實例梳虽，就會調(diào)用Promise.resolve方法，將參數(shù)轉(zhuǎn)為Promise實例灾茁，再進一步處理窜觉。

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

例子：

var p = Promise.race([
    fetch('/resource-that-may-take-a-while'),
    new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('request timeout')), 5000)
    })])
p.then(response => console.log(response))
p.catch(error => console.log(error))
復制代碼

Promise.reject(reason)

會返回一個新的Promise實例，該實例的狀態(tài)為rejected北专。

參數(shù)reason竖螃，會被傳遞給實例的回調(diào)函數(shù)。

var p = Promise.reject('出錯了');
// 等同于
var p = new Promise((resolve, reject) => reject('foo'))

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

Promise.resolve(obj)

將對象轉(zhuǎn)為Promise對象逗余。

比如：參數(shù)為字符串時特咆，不屬于異步操作（判斷方法是它不是具有then方法的對象），所以等價于Promise構(gòu)造函數(shù)立即執(zhí)行resolve("str");

如果沒有參數(shù)录粱，可以得到一個Promise對象腻格。

如果參數(shù)是一個Promise實例，則會被原封不動地返回啥繁。

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

Promise.resolve等價于下面的寫法菜职。

Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))
復制代碼

例子：

var p = Promise.resolve('Hello');
p.then(function (s){console.log(s)});// Hello
復制代碼

例子：

var p = Promise.resolve();
p.then(function () { // ...});
復制代碼

Promise.prototype.catch()的概念

是 promise實例.then(null, rejection) 的別名，用于指定發(fā)生錯誤時的回調(diào)函數(shù)旗闽。

例子：

getJSON方法返回一個Promise對象酬核，如果該對象狀態(tài)變?yōu)镽esolved，則會調(diào)用then方法指定的回調(diào)函數(shù)适室；

如果異步操作拋出錯誤嫡意，狀態(tài)就會變?yōu)镽ejected，就會調(diào)用catch方法指定的回調(diào)函數(shù)捣辆，處理這個錯誤蔬螟。

getJSON("/posts.json").then(function(posts) { // ...
}).catch(function(error) { // 處理前一個回調(diào)函數(shù)運行時發(fā)生的錯誤
    console.log('發(fā)生錯誤!', error);
});
復制代碼

例子：

p.then((val) => console.log("fulfilled:", val)).catch((err) => console.log("rejected:", err));
// 等同于

p.then((val) => console.log(fulfilled: ", val)).then(null, (err) => console.log("
 rejected: ", err));
復制代碼

例子：

Promise拋出一個錯誤，就被catch方法指定的回調(diào)函數(shù)捕獲汽畴。

var promise = new Promise(function(resolve, reject) {
    throw new Error('test') });
promise.catch(function(error) { console.log(error) });// Error: test
復制代碼

盡量不定義then的reject方法

一般來說旧巾，不要在then方法里面定義Reject狀態(tài)的回調(diào)函數(shù)（即then的第二個參數(shù)）耸序，總是使用catch方法。

第二種寫法要好于第一種寫法鲁猩，理由是前者更接近同步的寫法（try/catch）坎怪。

// bad
promise
    .then(function(data) { // success
    }, function(err) { // error
    });
// good
promise
    .then(function(data) { //cb
        // success
    }).catch(function(err) { // error
    });
復制代碼

catch方法返回的還是一個Promise對象，因此后面還可以接著調(diào)用then方法廓握。

var someAsyncThing = function() {
    return new Promise(function(resolve, reject) { // 下面一行會報錯芋忿，因為x沒有聲明
        resolve(x + 2);
    });
};
someAsyncThing().catch(function(error) {
    console.log('oh no', error);
}).then(function() {
    console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on
復制代碼

如果前面的promise和then()沒有報錯，則會跳過catch方法疾棵。

Promise.resolve().catch(function(error) {
    console.log('oh no', error);
}).then(function() {
    console.log('carry on');
});
// carry on
復制代碼

拋錯的冒泡性質(zhì)

Promise對象的錯誤具有“冒泡”性質(zhì)戈钢，會一直向后傳遞，直到被捕獲為止是尔。

也就是說殉了，錯誤總是會被下一個catch語句捕獲。

例子：

一共有三個Promise對象：一個由getJSON產(chǎn)生拟枚，兩個由then產(chǎn)生薪铜。它們之中任何一個拋出的錯誤，都會被最后一個catch捕獲恩溅。

getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL); }).then(function(comments) { // some code
}).catch(function(error) { // 處理前面三個Promise產(chǎn)生的錯誤
});
復制代碼

如果Promise狀態(tài)已經(jīng)變成resolved隔箍，再拋出錯誤是無效的。

Promise在resolve語句后面脚乡，再拋出錯誤蜒滩，不會被捕獲，等于沒有拋出奶稠。

var promise = new Promise(function(resolve, reject) { resolve("ok");
    throw new Error('test'); });
promise.then(function(value) { 
console.log(value) }).catch(function(error) {
 console.log(error) });// ok
復制代碼

Promise在下一輪“事件循環(huán)”再拋出錯誤

結(jié)果由于沒有指定使用try...catch語句俯艰，就冒泡到最外層，成了未捕獲的錯誤锌订。

因為此時竹握，Promise的函數(shù)體已經(jīng)運行結(jié)束了，所以這個錯誤是在Promise函數(shù)體外拋出的辆飘。

var promise = new Promise(function(resolve, reject) {      resolve("ok");
    setTimeout(function() {
        throw new Error('test') }, 0) });
promise.then(function(value) { console.log(value) });
// ok
// Uncaught Error: test
復制代碼

如果沒有處理錯誤的回調(diào)函數(shù)啦辐，就沒有反應(yīng)

跟傳統(tǒng)的try/catch代碼塊不同的是，如果沒有使用catch方法指定錯誤處理的回調(diào)函數(shù)蜈项，Promise對象拋出的錯誤不會傳遞到外層代碼芹关，即不會有任何反應(yīng)。

someAsyncThing函數(shù)產(chǎn)生的Promise對象會報錯战得，但是由于沒有指定catch方法充边，這個錯誤不會被捕獲庸推，也不會傳遞到外層代碼常侦，導致運行后沒有任何輸出浇冰。

var someAsyncThing = function() {
    return new Promise(function(resolve, reject) { // 下面一行會報錯，因為x沒有聲明
        resolve(x + 2);
    });
};
someAsyncThing().then(function() {
    console.log('everything is great');
});
復制代碼

catch方法之中聋亡，還能再拋出錯誤肘习。

catch方法拋出一個錯誤，因為后面沒有別的catch方法了坡倔，導致這個錯誤不會被捕獲漂佩，也不會傳遞到外層。

var someAsyncThing = function() {
    return new Promise(function(resolve, reject) { // 下面一行會報錯罪塔，因為x沒有聲明
        resolve(x + 2);
    });
};
someAsyncThing().then(function() {
    return someOtherAsyncThing(); }).catch(function(error) {
    console.log('oh no', error); // 下面一行會報錯投蝉，因為y沒有聲明
    y + 2;
}).then(function() {
    console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
復制代碼

如果改寫一下，結(jié)果就不一樣了征堪。

第二個catch方法用來捕獲瘩缆，前一個catch方法拋出的錯誤。

someAsyncThing().then(function() {
    return someOtherAsyncThing(); }).catch(function(error) {
    console.log('oh no', error); // 下面一行會報錯佃蚜，因為y沒有聲明
    y + 2;
}).catch(function(error) {
    console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]
復制代碼

node.js的unhandledRejection

Node.js有一個unhandledRejection事件庸娱，專門監(jiān)聽未捕獲的reject錯誤。

unhandledRejection事件的監(jiān)聽函數(shù)有兩個參數(shù)谐算，第一個是錯誤對象熟尉，第二個是報錯的Promise實例，它可以用來了解發(fā)生錯誤的環(huán)境信息洲脂。

process.on('unhandledRejection', function (err, p) {
  console.error(err.stack)});
復制代碼

done()

Promise對象的回調(diào)鏈斤儿，不管以then方法或catch方法結(jié)尾，要是最后一個方法拋出錯誤恐锦，都有可能會漏掉（Promise內(nèi)部的錯誤不會冒泡到全局）雇毫。

因此，我們可以提供一個done方法踩蔚，總是處于回調(diào)鏈的尾端棚放，保證拋出任何可能出現(xiàn)的錯誤。

asyncFunc().then(f1).catch(r1).then(f2).done();
復制代碼

done方法的使用馅闽，可以像then方法那樣用飘蚯，提供Fulfilled和Rejected狀態(tài)的回調(diào)函數(shù)，也可以不提供任何參數(shù)福也。但不管怎樣局骤，done都會捕捉到任何可能出現(xiàn)的錯誤，并向全局拋出暴凑。

實現(xiàn)代碼：

Promise.prototype.done = function (resolve, reject) {
    this.then(resolve, reject).catch(function (reason) { // 拋出一個全局錯誤
        setTimeout(() => {
            throw reason
        }, 0);
    });
};
復制代碼

finally()

finally方法用于指定不管Promise對象最后狀態(tài)如何峦甩，都會執(zhí)行的操作。

它與done方法的最大區(qū)別，它接受一個普通的回調(diào)函數(shù)作為參數(shù)凯傲，該函數(shù)不管怎樣都必須執(zhí)行犬辰。

等效于，運行一個then()冰单，在成功和失敗回調(diào)函數(shù)中幌缝，都要運行callback()，

在Promise.resolve()中運行callback()后诫欠，在運行then()涵卵，返回結(jié)果。

下面是一個例子荒叼，服務(wù)器使用Promise處理請求轿偎，然后使用finally方法關(guān)掉服務(wù)器。

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

它的實現(xiàn)：

Promise.prototype.finally = function(callback) {
    return this.then(
        value => Promise.resolve(  callback()  ).then(() => value),
        reason => Promise.resolve(callback()).then(() => {throw reason }));
};