深入掌握Promise调用链的精髓与应用技巧

媒介

運用Promise中，鏈式的挪用關於掌握異步實行很主要。

鏈式挪用

在jQuery的運用中，我們經常運用下面的代碼

$('#app').show().css("color","red");

這是因為jQuery的對象在挪用上述要領的時刻，會return此對象本身, 以輕易背面能夠繼承挪用此對象的要領。

jQuery.fn.css = function(prop, value) {
......
return this;
}
jQuery.fn.show = function() {
......
return this;
}

Promise的鏈式挪用

Promise是支撐鏈式挪用的，然則它是不同於上面jQuery的鏈式。jQeury是挪用要領返回本身，然則Promise是挪用要領后返回一個新的Promise。

const promise = new Promise((resolve, reject) => {
resolve('ok');
})
const promise$1 = promise.then(() => {console.log()});
promise$1 === promise // false

能夠看到上面的promise$1是不等於promise的，假如能夠在node.js 或許在瀏覽器中舉行斷點調試的話，還能看到promise$1的初始化狀況是pending的。

當Promise的實例運用then, catch, finally增加完回調要領今後，會返回一個初始化狀況為pending的Promise的實例對象。此對象的狀況我們在外部的遞次是沒法舉行轉變的，它的狀況取決於前面所註冊的回調要領的實行情況。 當回調要領運轉一般，沒有發作毛病或許非常，返回的值除Promise實例與本身(返回本身將會報錯)，返回的Promise的實例對象狀況會變成resolved， 假如有毛病或許非常，則會把狀況變成rejected。固然了返回值是Promise的實例對象，那末次Promise實例對象的狀況取決於返回的Promise實例對象的狀況。

下圖以then為例展現promise鏈式挪用運轉的流程

示例剖析

1. 挪用鏈then的實行遞次

const promise$0 = Promise.resolve('resolve_0');
const promise$1 = new Promise((resolve, reject) => {resolve('resolve_1')})
promise$0.then((val) => { console.log(val) }).then(() => { console.log('continue') });
promise$1.then((val) => { console.log(val) });

//輸出效果: resolve_0 resolve_1 continue

promise$0與promise$1在運用then增加回掉函數之前，狀況已從pending變成resolved，它們增加的回掉函數會被馬上增加到Promise的運轉行列，promise$0.then((val) => { console.log(val) })返回的Promise實例須要守候所註冊的回調函數勝利實行終了今後，此Promise的狀況才從pending變成resolved。 Promise的運轉機制請參考: Promise的運轉機制

2. 值穿透

const promise = Promise.resolve('ok');
promise.then().then((val) => {console.log(val)});
// ok

因為promise經由過程then沒有勝利增加回調函數，發作了值穿透。

3. 狀況通報

const promise = Promise.resolve('complete');
promise.then((val) => {
return new Promise ((resolve) => {
resolve(val)
console.log(val, 1);
})
})
.then((val) => {console.log(val, 2)})
// complete 1 complete 2

我們把Promise暫定名(Pa), 經由過程promise.then返回的Promise(暫定名Pb), Pb狀況須要依據Pathen所註冊回調要領的運轉，其回調要領返回一個新的Promise(暫定名Pc)，因為返回的是Promise。Pb的狀況變成取決於Pc的狀況, 當Pc的狀況變化為resolved今後，Pb的狀況也變化為resolved。

4. 奇妙的非常處置懲罰

var promise = Promise.resolve('ok');
promise.then(() => {
throw new Error('error');
}).then(() => {
console.log('continue');
}).then(() => {
console.log('again');
}).catch(() => {
}).then(() => {
console.log('completed')
})
// completed

在then所註冊的回調要領，發作非常今後，後續的Promise挪用鏈的狀況都是rejected，致使後續的then(resolve)不會被推入Promise的運轉行列，也就不會被運轉，直到這個毛病被then(,reject) 或許catch捕捉。 而運用(then(,reject)) 或許catch註冊回調要領又會返回一個新的Promise，此Promise的狀況又只與它們所註冊的回調要領的實行相干。不會遭到前面的影響。