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

時間  2020-05-30
標籤 圖解 promise 實現 原理 原型 方法 简体版
原文   原文鏈接

本文首發於 vivo互聯網技術 微信公衆號
連接： mp.weixin.qq.com/s/u8wuBwLpc…
做者：Morraingit

Promise 是異步編程的一種解決方案，它由社區最先提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。更多關於 Promise 的介紹請參考阮一峯老師的 ES6入門 之 Promise 對象。es6

不少同窗在學習 Promise 時，知其然殊不知其因此然，對其中的用法理解不了。本系列文章由淺入深逐步實現 Promise，並結合流程圖、實例以及動畫進行演示，達到深入理解 Promise 用法的目的。github

本系列文章有以下幾個章節組成：編程

  1. 圖解 Promise 實現原理（一）—— 基礎實現promise

  2. 圖解 Promise 實現原理（二）—— Promise 鏈式調用bash

  3. 圖解 Promise 實現原理（三）—— Promise 原型方法實現服務器

  4. 圖解 Promise 實現原理（四）—— Promise 靜態方法實現微信

1、【前言】

上一節中，實現了 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 狀態等的實現。

2、【錯誤處理】

以前爲了講解原理，只是實現了 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複製代碼

3、【異常處理】

剛剛介紹了錯誤處理，是指在 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的源碼

4、【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 聯繫。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程