這篇文章給大家介紹如何進(jìn)行Promise原型方法實(shí)現(xiàn)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站建設(shè)方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及成都房屋鑒定等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。
Promise 是異步編程的一種解決方案，它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。
上一節(jié)中，實(shí)現(xiàn)了 Promise 的鏈?zhǔn)秸{(diào)用。鏈?zhǔn)秸{(diào)用是 Promise 的難點(diǎn)，更是重點(diǎn)。截至目前，Promise 的實(shí)現(xiàn)如下：
重慶分公司
重慶分公司
class Promise {
callbacks = [];
state = 'pending';//增加狀態(tài)
value = null;//保存結(jié)果
constructor(fn) {
fn(this._resolve.bind(this));
}
then(onFulfilled) {
return new Promise(resolve => {
this._handle({
onFulfilled: onFulfilled || null,
resolve: resolve
});
});
}
_handle(callback) {
if (this.state === 'pending') {
this.callbacks.push(callback);
return;
}
//如果then中沒有傳遞任何東西
if (!callback.onFulfilled) {
callback.resolve(this.value);
return;
}
var ret = callback.onFulfilled(this.value);
callback.resolve(ret);
}
_resolve(value) {
if (value && (typeof value === 'object' || typeof value === 'function')) {
var then = value.then;
if (typeof then === 'function') {
then.call(value, this._resolve.bind(this));
return;
}
}
this.state = 'fulfilled';//改變狀態(tài)
this.value = value;//保存結(jié)果
this.callbacks.forEach(callback => this._handle(callback));
}
}本節(jié)主要介紹 Promise 原型方法的實(shí)現(xiàn)，包括 catch、finally 以及 rejected 狀態(tài)等的實(shí)現(xiàn)。
之前為了講解原理，只是實(shí)現(xiàn)了 onFulfilled ，對(duì)于 Promise 來(lái)說(shuō)，除了成功還有失敗，在失敗時(shí)，要標(biāo)記 Promise 的狀態(tài)為 rejected， 并執(zhí)行注冊(cè)的 onRejected。如下Demo所示：
/**
* 模擬異常異步請(qǐng)求
* @param {*} url
* @param {*} s
* @param {*} callback
*/
const mockAjax = (url, s, callback) => {
setTimeout(() => {
callback(url + '異步請(qǐng)求耗時(shí)' + s + '秒', '出錯(cuò)了!');
}, 1000 * s)
}
//demo reject
new Promise((resolve, reject) => {
mockAjax('getUserId', 1, function (result, error) {
if (error) {
reject(error)
} else {
resolve(result);
}
})
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});有了之前處理 fulfilled 狀態(tài)的經(jīng)驗(yàn)，支持錯(cuò)誤處理變得很容易，只需要在注冊(cè)回調(diào)、處理狀態(tài)變更上都要加入新的 reject 邏輯。
//完整的實(shí)現(xiàn)+reject
class Promise {
callbacks = [];
state = 'pending';//增加狀態(tài)
value = null;//保存結(jié)果
constructor(fn) {
fn(this._resolve.bind(this), this._reject.bind(this));
}
then(onFulfilled, onRejected) {
return new Promise((resolve, reject) => {
this._handle({
onFulfilled: onFulfilled || null,
onRejected: onRejected || null,
resolve: resolve,
reject: reject
});
});
}
_handle(callback) {
if (this.state === 'pending') {
this.callbacks.push(callback);
return;
}
let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
if (!cb) {//如果then中沒有傳遞任何東西
cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
cb(this.value);
return;
}
let ret = cb(this.value);
cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
cb(ret);
}
_resolve(value) {
if (value && (typeof value === 'object' || typeof value === 'function')) {
var then = value.then;
if (typeof then === 'function') {
then.call(value, this._resolve.bind(this), this._reject.bind(this));
return;
}
}
this.state = 'fulfilled';//改變狀態(tài)
this.value = value;//保存結(jié)果
this.callbacks.forEach(callback => this._handle(callback));
}
_reject(error) {
this.state = 'rejected';
this.value = error;
this.callbacks.forEach(callback => this._handle(callback));
}
}demo-reject的源碼
運(yùn)行結(jié)果如下：
[Promse-1]:constructor
[Promse-1]:then
[Promse-2]:constructor
[Promse-1]:_handle state= pending
[Promse-1]:_handle callbacks= [ { onFulfilled: [Function],
onRejected: [Function],
resolve: [Function],
reject: [Function] } ]
=> Promise { callbacks: [], name: 'Promse-2', state: 'pending', value: null }
[Promse-1]:_reject
[Promse-1]:_reject value= 出錯(cuò)了!
[Promse-1]:_handle state= rejected
出錯(cuò)了!
[Promse-2]:_reject
[Promse-2]:_reject value= undefined剛剛介紹了錯(cuò)誤處理，是指在 Promise 的構(gòu)造函數(shù)中發(fā)現(xiàn)的錯(cuò)誤，并通過(guò) reject 通知的。如果在執(zhí)行 onFulfilled 或者 onRejected 時(shí)，出現(xiàn)了異常，該如何處理呢？對(duì)于這類異常，處理也很簡(jiǎn)單，可以使用 try-catch 捕獲錯(cuò)誤，然后將相應(yīng)的 Promise 狀態(tài)設(shè)置為 rejected 狀態(tài)。改造_handle方法如下：
_handle(callback) {
if (this.state === 'pending') {
this.callbacks.push(callback);
return;
}
let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
if (!cb) {//如果then中沒有傳遞任何東西
cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
cb(this.value);
return;
}
let ret;
try {
ret = cb(this.value);
cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
} catch (error) {
ret = error;
cb = callback.reject
} finally {
cb(ret);
}
}demo-error的源碼
不管是錯(cuò)誤也好，異常也罷，最終都是通過(guò) reject 實(shí)現(xiàn)的，可見最終對(duì)于錯(cuò)誤以及異常的處理，都可以通過(guò) then 中的 onRejected 來(lái)處理。所以單獨(dú)增加一個(gè) catch 方法，它是 .then(null, onRejected) 的別名。如下：
then(onFulfilled, onRejected) {
return new Promise((resolve, reject) => {
this._handle({
onFulfilled: onFulfilled || null,
onRejected: onRejected || null,
resolve: resolve,
reject: reject
});
});
}
catch(onError){
return this.then(null, onError);
}demo-catch的源碼
在實(shí)際應(yīng)用的時(shí)候，我們很容易會(huì)碰到這樣的場(chǎng)景，不管 Promise 最后的狀態(tài)如何，都要執(zhí)行某些操作(onDone)。例如服務(wù)器使用 Promise 處理請(qǐng)求，然后使用finally方法關(guān)掉服務(wù)器:
server.listen(port)
.then(function () {
// do something
})
.catch(error=>{
// handle error
})
.finally(server.stop);本質(zhì)上，因?yàn)樗?then 的一種變形。上面的 demo 的效果等價(jià)于如下的代碼：
server.listen(port)
.then(function () {
// do something
})
.catch(error=>{
// handle error
})
.then(server.stop, server.stop);通過(guò)上面的分析，finally看上去可以這么實(shí)現(xiàn)：
finally(onDone){
return this.then(onDone, onDone);
}但是由于 finally 方法的 onDone 不關(guān)心 Promise 的狀態(tài)到底是 fulfilled 還是 rejected ，所以onDone 里的操作，應(yīng)該是與狀態(tài)無(wú)關(guān)的，并且不應(yīng)該有任何參數(shù)。
如果使用 then 來(lái)實(shí)現(xiàn)就不符合 Promise 規(guī)范中關(guān)于《 Why not .then(f, f)?》的說(shuō)明 。一來(lái) onDone 有參數(shù)，二來(lái)當(dāng) onDone 返回一個(gè)Promise時(shí)，會(huì)改變 finally 返回的Promise的值 狀態(tài) 。
根據(jù)規(guī)范，finally實(shí)現(xiàn)如下：
catch(onError) {
return this.then(null, onError);
}
finally(onDone) {
if (typeof onDone !== 'function') return this.then();
let Promise = this.constructor;
return this.then(
value => Promise.resolve(onDone()).then(() => value),
reason => Promise.resolve(onDone()).then(() => { throw reason })
);
}demo-finally的源碼
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000)
}).finally(() => {
console.log('onDone')
})對(duì)于上面的示例，執(zhí)行結(jié)果如下：
[Promse-1]:constructor
[Promse-1]:finally
[Promse-1]:then
[Promse-2]:constructor
[Promse-1]:_handle state= pending
[Promse-1]:_handle callbacks= [ { onFulfilled: [Function],
onRejected: [Function],
resolve: [Function],
reject: [Function] } ]
=> Promise { callbacks: [], name: 'Promse-2', state: 'pending', value: null }
[Promse-1]:_resolve
[Promse-1]:_resolve value= success
[Promse-1]:_handle state= fulfilled
onDone
Promise::resolve
[Promse-3]:constructor
[Promse-3]:_resolve
[Promse-3]:_resolve value= undefined
[Promse-3]:then
[Promse-4]:constructor
[Promse-3]:_handle state= fulfilled
[Promse-4]:_resolve
[Promse-4]:_resolve value= success
[Promse-2]:_resolve
[Promse-2]:_resolve value= Promise {
callbacks: [],
name: 'Promse-4',
state: 'fulfilled',
value: 'success' }
[Promse-4]:then
[Promse-5]:constructor
[Promse-4]:_handle state= fulfilled
[Promse-2]:_resolve
[Promse-2]:_resolve value= success
[Promse-5]:_resolve
[Promse-5]:_resolve value= undefined同樣可以通過(guò)示意動(dòng)畫來(lái)還原這個(gè)過(guò)程：
（Promise.finally 演示動(dòng)畫）點(diǎn)擊打開>>
finally 的實(shí)現(xiàn)看起來(lái)簡(jiǎn)單，實(shí)際理解還是比較困難，對(duì)于上面的實(shí)例，中間其實(shí)有5個(gè) Promise實(shí)例生成。如下圖所示：
關(guān)于如何進(jìn)行Promise原型方法實(shí)現(xiàn)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
