圖解 Promise 實作原理（三）—— Promise 原型方法實作

本系列文章由淺入深逐漸實作 Promise，并結合流程圖、執行個體以及動畫進行示範，達到深刻了解 Promise 用法的目的。

本文首發于 vivo網際網路技術微信公衆号

連結： https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw

作者：Morrain

Promise 是異步程式設計的一種解決方案，它由社群最早提出和實作，ES6 将其寫進了語言标準，統一了用法，原生提供了Promise對象。更多關于 Promise 的介紹請參考阮一峰老師的 ES6入門之 Promise 對象。

很多同學在學習 Promise 時，知其然卻不知其是以然，對其中的用法了解不了。本系列文章由淺入深逐漸實作 Promise，并結合流程圖、執行個體以及動畫進行示範，達到深刻了解 Promise 用法的目的。

本系列文章有如下幾個章節組成：

圖解 Promise 實作原理（一）—— 基礎實作
圖解 Promise 實作原理（二）—— Promise 鍊式調用
圖解 Promise 實作原理（三）—— Promise 原型方法實作
圖解 Promise 實作原理（四）—— Promise 靜态方法實作

一、【前言】

上一節中，實作了 Promise 的鍊式調用。鍊式調用是 Promise 的難點，更是重點。截至目前，Promise 的實作如下：

class Promise {
    callbacks = [];
    state = 'pending';//增加狀态
    value = null;//儲存結果
    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';//改變狀态
        this.value = value;//儲存結果
        this.callbacks.forEach(callback => this._handle(callback));
    }
}

本節主要介紹 Promise 原型方法的實作，包括 catch、finally 以及 rejected 狀态等的實作。

二、【錯誤處理】

之前為了講解原理，隻是實作了 onFulfilled ，對于 Promise 來說，除了成功還有失敗，在失敗時，要标記 Promise 的狀态為 rejected，并執行注冊的 onRejected。如下Demo所示：

/**
 * 模拟異常異步請求
 * @param {*} url
 * @param {*} s
 * @param {*} callback
 */
const mockAjax = (url, s, callback) => {
  setTimeout(() => {
    callback(url + '異步請求耗時' + s + '秒', '出錯了!');
  }, 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 狀态的經驗，支援錯誤處理變得很容易，隻需要在注冊回調、處理狀态變更上都要加入新的 reject 邏輯。

//完整的實作+reject
class Promise {
    callbacks = [];
    state = 'pending';//增加狀态
    value = null;//儲存結果
    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';//改變狀态
        this.value = value;//儲存結果
        this.callbacks.forEach(callback => this._handle(callback));
    }
    _reject(error) {
        this.state = 'rejected';
        this.value = error;
        this.callbacks.forEach(callback => this._handle(callback));
    }
}

demo-reject的源碼

運作結果如下：

[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= 出錯了!
[Promse-1]:_handle state= rejected
出錯了!
[Promse-2]:_reject
[Promse-2]:_reject value= undefined

三、【異常處理】

剛剛介紹了錯誤處理，是指在 Promise 的構造函數中發現的錯誤，并通過 reject 通知的。如果在執行 onFulfilled 或者 onRejected 時，出現了異常，該如何處理呢？對于這類異常，處理也很簡單，可以使用 try-catch 捕獲錯誤，然後将相應的 Promise 狀态設定為 rejected 狀态。改造_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的源碼

不管是錯誤也好，異常也罷，最終都是通過 reject 實作的，可見最終對于錯誤以及異常的處理，都可以通過 then 中的 onRejected 來處理。是以單獨增加一個 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的源碼

四、【Finally方法】

在實際應用的時候，我們很容易會碰到這樣的場景，不管 Promise 最後的狀态如何，都要執行某些操作(onDone)。例如伺服器使用 Promise 處理請求，然後使用finally方法關掉伺服器:

server.listen(port)
.then(function () {
    // do something
 })
.catch(error=>{
    // handle error
})
.finally(server.stop);

本質上，因為它是 then 的一種變形。上面的 demo 的效果等價于如下的代碼：

server.listen(port)
  .then(function () {
    // do something
  })
.catch(error=>{
    // handle error
})
.then(server.stop, server.stop);

通過上面的分析，finally看上去可以這麼實作：

finally(onDone){
    return this.then(onDone, onDone);
}

但是由于 finally 方法的 onDone 不關心 Promise 的狀态到底是 fulfilled 還是 rejected ，是以onDone 裡的操作，應該是與狀态無關的，并且不應該有任何參數。

如果使用 then 來實作就不符合 Promise 規範中關于《Why not .then(f, f)?》的說明。一來 onDone 有參數，二來當 onDone 傳回一個Promise時，會改變 finally 傳回的Promise的值狀态。

根據規範，finally實作如下：

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')
})

對于上面的示例，執行結果如下：

[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

同樣可以通過示意動畫來還原這個過程：

（Promise.finally 示範動畫）點選打開>>

finally 的實作看起來簡單，實際了解還是比較困難，對于上面的執行個體，中間其實有5個 Promise執行個體生成。如下圖所示：

原型方法就介紹這麼多，下一節介紹兩個靜态方法

更多内容敬請關注 vivo 網際網路技術微信公衆号

注：轉載文章請先與微信号：Labs2020 聯系。

分享 vivo 網際網路技術幹貨與沙龍活動，推薦最新行業動态與熱門會議。

圖解 Promise 實作原理（三）—— Promise 原型方法實作

一、【前言】

二、【錯誤處理】

三、【異常處理】

四、【Finally方法】

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題