2. 程式人生 > >實現一個Promise(基於Promise/A+規範)

實現一個Promise(基於Promise/A+規範)

阿新 • • 發佈：2019-01-02

前言

相信大家經常使用Promise，或者使用Generator、asnyc/await等非同步解決方案，網上的Promise原理也遍地開花。
一直以來想抽出時間也寫一寫Promise實現，但是平常工作也是忙的不可開交，正好元旦放了3天假期，休息了2天半，抽出半天時間來看一看Promise。

如何使用Promise

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000)
}).then((data) => {
  console.log(data);
  return new Promise((res) => {
    set
 
Timeout(() => {
      res(2);
    },1000)
  })

}).then((res) => {
  console.log(res);
})

複製程式碼

術語

  • Promise是一個包含了相容promise規範then方法的物件或函式。
  • thenable 是一個包含了then方法的物件或函式。
  • value 是任何Javascript值。 (包括 undefined, thenable, Promise等)。
  • exception 是由throw表示式丟擲來的值。
  • reason 是一個用於描述Promise被拒絕原因的值。

由於Promise/A+

規範並不包括catch、race、all等方法的實現，所以這裡也不會去詳細解釋。

要求

一個Promise必須處在其中之一的狀態：pending, fulfilled 或 rejected。 如果是pending狀態,則promise：

可以轉換到fulfilled或rejected狀態。 如果是fulfilled狀態,則promise：

  • 不能轉換成任何其它狀態。
  • 必須有一個值，且這個值不能被改變。

如果是rejected狀態,則promise可以：

  • 不能轉換成任何其它狀態。
  • 必須有一個原因，且這個值不能被改變。
function MyPromise(callback
 
) {

  let that = this;
  //定義初始狀態
  //Promise狀態
  that.status = 'pending';
  //value
  that.value = 'undefined';
  //reason 是一個用於描述Promise被拒絕原因的值。
  that.reason = 'undefined';

  //定義resolve
  function resolve(value) {
    //當status為pending時，定義Javascript值，定義其狀態為fulfilled
    if(that.status === 'pending') {
      that.value = value;
      that.status = 'resolved';
    }
  }

  //定義reject
  function reject(reason) {
    //當status為pending時，定義reason值，定義其狀態為rejected
    if(that.status === 'pending') {
      that.reason = reason;
      that.status = 'rejected';
    }
  }

  //捕獲callback是否報錯
  try {
    callback(resolve, reject);
  } catch (error) {
    reject(error);
  }
}
複製程式碼

Promise物件有一個then方法，用來註冊在這個Promise狀態確定後的回撥，then方法接受兩個引數： Promise.then(onFulfilled,onRejected)。
我們把then函式寫在原型上。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  let that = this;

  if(that.status === 'resolved') {
    onFulfilled(that.value);
  }

  if(that.status === 'rejected') {
    onRejected(that.reason);
  }
}
複製程式碼

上述程式碼只是實現了Promise的最基本邏輯，如果直接呼叫then是可以執行的，但是並不支援非同步，而Promise最大的特點就是解決callback非同步回撥地獄的問題。
所以我們來改造下。

function MyPromise(callback) {

  let that = this;
  //定義初始狀態
  //Promise狀態
  that.status = 'pending';
  //value
  that.value = 'undefined';
  //reason 是一個用於描述Promise被拒絕原因的值。
  that.reason = 'undefined';
  //用來解決非同步問題的陣列
  that.onFullfilledArray = [];
  that.onRejectedArray = [];

  //定義resolve
  function resolve(value) {
    //當status為pending時，定義Javascript值，定義其狀態為fulfilled
    if(that.status === 'pending') {
      that.value = value;
      that.status = 'resolved';
      that.onFullfilledArray.forEach((func) => {
        func(that.value);
      });
    }
  }

  //定義reject
  function reject(reason) {
    //當status為pending時，定義reason值，定義其狀態為rejected
    if(that.status === 'pending') {
      that.reason = reason;
      that.status = 'rejected';
      that.onRejectedArray.forEach((func) => {
        func(that.reason);
      });
    }
  }

  //捕獲callback是否報錯
  try {
    callback(resolve, reject);
  } catch (error) {
    reject(error);
  }
}
複製程式碼

then函式的改造

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  let that = this;
  //需要修改下，解決非同步問題，即當Promise呼叫resolve之後再呼叫then執行onFulfilled(that.value)。
  //用兩個陣列儲存下onFulfilledArray
  if(that.status === 'pending') {
    that.onFullfilledArray.push((value) => {
      onFulfilled(value);
    });

    that.onRejectedArray.push((reason) => {
      onRejected(reason);
    });
  }

  if(that.status === 'resolved') {
    onFulfilled(that.value);
  }

  if(that.status === 'rejected') {
    onRejected(that.reason);
  }
}
複製程式碼

由於Promise/A+規範規定一個Promise必須處在其中之一的狀態：pending, fulfilled 或 rejected，所以在使用者使用Promise時，寫的是非同步程式碼的話，那麼此時Promise一定是處於pending狀態，反之正常呼叫。
因此，初始化Promise時，定義兩個陣列為onFullfilledArray，onRejectedArray，用來儲存then函式的兩個回撥函式onFulfilled和onRejected。同時我們在then函式中判斷status是否是pending，然後將onFulfilled和onRejected分別傳入對應陣列中。當用戶呼叫resolve或reject時，更改狀態，遍歷陣列，執行onFulfilled或者onRejected,從而非同步呼叫。

then函式的鏈式呼叫

在Promise/A+規範中：

對於一個promise，它的then方法可以呼叫多次

  • 當promise fulfilled後，所有onFulfilled都必須按照其註冊順序執行。
  • 當promise rejected後，所有OnRejected都必須按照其註冊順序執行。

then 必須返回一個promise

  • 如果onFulfilled 或 onRejected 返回了值x, 則執行Promise 解析流程[[Resolve]](promise2, x)。
  • 如果onFulfilled 或 onRejected丟擲了異常e, 則promise2應當以e為reason被拒絕。
  • 如果 onFulfilled 不是一個函式且promise1已經fulfilled，則promise2必須以promise1的值fulfilled。
  • 如果OnReject 不是一個函式且promise1已經rejected, 則promise2必須以相同的reason被拒絕。
MyPromise.prototype.then = function(onFulfilled, onRejected) {
  let that = this;
  let promise2;

  // 根據標準，如果then的引數不是function，則我們需要忽略它
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(f) {};
  onRejected = typeof onRejected === 'function' ? onRejected : function(r) {};
  //需要修改下，解決非同步問題，即當Promise呼叫resolve之後再呼叫then執行onFulfilled(that.value)。
  //用兩個陣列儲存下onFulfilledArray
  if(that.status === 'pending') {

    return promise2 = new Promise(function(resolve, reject) {
      that.onFullfilledArray.push((value) => {
      try {
        let x = onFulfilled(that.value);
        //判斷onFulfilled是否是一個Promise，如果是，那麼就直接把MyPromise中的resolve和reject傳給then;
        //返回值是一個Promise物件，直接取它的結果做為promise2的結果
        if(x instanceof MyPromise) {
          x.then(resolve, reject);
        }
        //否則，以它的返回值做為promise2的結果
        resolve(x);
      } catch (error) {
        reject(error);
      }
      });

      that.onRejectedArray.push((value) => {
          try {
            let x = onRejected(that.value);
            //判斷onRejected是否是一個Promise，如果是，那麼就直接把MyPromise中的resolve和reject傳給then;
            //返回值是一個Promise物件，直接取它的結果做為promise2的結果
            if(x instanceof MyPromise) {
              x.then(resolve, reject);
            }
            //否則，以它的返回值做為promise2的結果
            resolve(x);
          } catch (error) {
            reject(error);
          }
      });

    })
  }

  if(that.status === 'fulfilled') {
    return promise2 = new MyPromise(function(resolve, reject) {
      try {
        let x = onFulfilled(that.value);
        //判斷onFulfilled是否是一個Promise，如果是，那麼就直接把MyPromise中的resolve和reject傳給then;
        //返回值是一個Promise物件，直接取它的結果做為promise2的結果
        if(x instanceof MyPromise) {
          x.then(resolve, reject);
        }
        //否則，以它的返回值做為promise2的結果
        resolve(x);
      } catch (error) {
        reject(error);
      }
      
    })
  }

  if(that.status === 'rejected') {
    return new MyPromise(function(resolve, reject) {
      try {
        let x = onRejected(that.value);
        //判斷onRejected是否是一個Promise，如果是，那麼就直接把MyPromise中的resolve和reject傳給then;
        //返回值是一個Promise物件，直接取它的結果做為promise2的結果
        if(x instanceof MyPromise) {
          x.then(resolve, reject);
        }
        //否則，以它的返回值做為promise2的結果
        resolve(x);
      } catch (error) {
        reject(error);
      }
      
    })
    
  }
}

複製程式碼

在呼叫then時，判斷onFulfilled和onRejected是否是一個函式，如果不是，返回一個匿名函式，同時必須返回各引數的值,用來解決鏈式呼叫時Promise值的穿透問題。
例如：

new MyPromise(resolve=>resolve(8))
  .then()
  .then()
  .then(function foo(value) {
    alert(value)
  })
複製程式碼

所以我們把這塊改成這樣：

  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(f) { return f};
  onRejected = typeof onRejected === 'function' ? onRejected : function(r) {throw r};
複製程式碼

但是這樣每次判斷都需要重新寫這個x和MyPromise的關係，所以，我們需要將這塊程式碼給抽象出來，這塊程式碼在Promise/A+規範中叫做resolvePromise。

function resolvePromise(promise, x, resolve, reject) {
  let then,thenCalledOrThrow = false
  //如果promise 和 x 指向相同的值, 使用 TypeError做為原因將promise拒絕。
  if (promise === x) {
    return reject(new TypeError('Chaining cycle detected for promise!'))
  }

  //判斷x是否是一個Promise，如果是，那麼就直接把MyPromise中的resolve和reject傳給then;
  //返回值是一個Promise物件，直接取它的結果做為promise2的結果
  if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) {
    try {
      then = x.then
      if (typeof then === 'function') { // typeof 

        //x.then(resolve, reject);
        then.call(x, function rs(y) {

          if (thenCalledOrThrow) return

          thenCalledOrThrow = true

          return resolvePromise(promise, y, resolve, reject)

        }, function rj(r) {

          if (thenCalledOrThrow) return

          thenCalledOrThrow = true

          return reject(r)

        })
      } else {

        return resolve(x)
      }
    } catch(e) {
      if (thenCalledOrThrow) return

      thenCalledOrThrow = true

      return reject(e)
    }
  } else {

    return resolve(x)
  }

}
複製程式碼

then函式最後修改為：

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  let that = this;
  let promise2;
  // 根據標準，如果then的引數不是function，則我們需要忽略它
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(f) { return f};
  onRejected = typeof onRejected === 'function' ? onRejected : function(r) {throw r};
  //需要修改下，解決非同步問題，即當Promise呼叫resolve之後再呼叫then執行onFulfilled(that.value)。
  //用兩個陣列儲存下onFulfilledArray
  if(that.status === 'pending') {
    return promise2 = new Promise(function(resolve, reject) {
      that.onFullfilledArray.push((value) => {
        try {
          let x = onFulfilled(value);
          resolvePromise(promise2, x, resolve, reject)
        } catch(e) {
          return reject(e)
        }
      });
      
      that.onRejectedArray.push((value) => {
        try {
          let x = onRejected(value);
          resolvePromise(promise2, x, resolve, reject)
        } catch(e) {
          return reject(e)
        }
      });
    })
  }

  if(that.status === 'fulfilled') {
    return promise2 = new MyPromise(function(resolve, reject) {
      try {
        let x = onFulfilled(that.value);
        //處理then的多種情況
        resolvePromise(promise2, x, resolve, reject)
      } catch (error) {
        reject(error);
      }
    })
  }

  if(that.status === 'rejected') {
    return new MyPromise(function(resolve, reject) {
      try {
        let x = onRejected(that.value);
        //處理then的多種情況
        resolvePromise(promise2, x, resolve, reject);
      } catch (error) {
        reject(error)
      }
      
    })
    
  }
}
複製程式碼

測試一下：

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000)
}).then((data) => {
  console.log(data);
  return new MyPromise((res) => {
    setTimeout(() => {
      res(2);
    },1000)
  })
}).then((res) => {
  console.log(res);
})
//1
//2
複製程式碼

最後

Promise GITHUB地址。
參考資料：

《Promise/A+規範》
《Promise3》
《實現一個完美符合Promise/A+規範的Promise》
《剖析Promise內部結構，一步一步實現一個完整的、能通過所有Test case的Promise類》

相關推薦

實現一個Promise(基於Promise/A+規範)

前言 相信大家經常使用Promise，或者使用Generator、asnyc/await等非同步解決方案，網上的Promise原理也遍地開花。 一直以來想抽出時間也寫一寫Promise實現，但是平常工作也是忙的不可開交，正好元旦放了3天假期，休息了2天半，抽出半天時間來看一看Promise。 如何使用Pr

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力 　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧 　　　先簡單來說一下啥是promise吧 　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。 　　 &n

【JavaScript進階】深入理解JavaScript中ES6的Promise的作用並實現一個自己的Promise

  1.Promise的基本使用 1 // 需求分析： 封裝一個方法用於讀取檔案路徑，返回檔案內容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一個回

ES6——手把手實現一個簡單的Promise

想要實現一個Promise，首先當然得先知道這個東西是什麼，Promise物件是ES6給我們提供的一個解決非同步回撥的一個語法糖，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。把非同步操作放入Promise物件中，等到Promise物件中

實現一個自己的promise

這是小弟的一篇開篇小作，如有不當之處，請各位道友批評指正。本文將探討Promise的實現。 一、ES6中的Promise 1、簡介 據說js很早就實現了Promise，我是不知道的，我第

實現一個簡單的Promise

我們可以在chrome開發工具下看下原生 promise 是什麼： new Promise((resolve, reject) => {}) return Promise { [[Pro

3行程式碼實現一個簡易版promise

前言 作為一個後端過來的同學,剛入門前端的時候,被js種種「反人類」的概念折騰的死去活來的. 其中一個印象比較深刻的,就是promise,感覺實在太難理解了…所有就有了寫個簡單的promise的想法. 希望能幫助到一些跟我一樣,感覺promise很難理解的

寫一個 符合 promise A+ 規範的 建構函式 MyPromise

promise A+規範 promise 是js 非同步發展至今的一個時代的產物  js的非同步 經過如下歷程，  事件監聽  回撥函式  訂閱釋出  promise 是一個時下非同步 的一個解決方案   其核心設計思想主

手寫實現滿足 Promise/A+ 規範的 Promise

最近看了 Promise/A+ 的規範，嘗試實現了一個滿足 promises-aplus-tests 測試的 Promise 類，在實現規範的過程中，對於 Promise 本身也加深了理解，這篇文章就將我的實現過程分享出來。 本文的程式碼倉庫在這裡，歡迎 Star～。 前置知識 Prom

Promise/A+規範

one 比較 ber return .get 參考 scrip 我們 形參 1.什麽是Promise? Promise是JS異步編程中的重要概念，異步抽象處理對象，是目前比較流行Javascript異步編程解決方案之一 2.對於幾種常見異步編程方案 回調函數 事件監

Axios 是一個基於 promise 的 HTTP 庫

else eve stringify http UNC bracket mil validate white NPM地址：https://www.npmjs.com/package/axios安裝使用 npm:$ npm install axios使用 bower:$ bo

基於Promise規範的fetch API的使用

body return 原生 heat ear 得到 console resp .com 基於Promise規範的fetch API的使用 fetch的使用 作用：fetch 這個API，是專門用來發起Ajax請求的； fetch 是由原生 JS 提供的 API ，專門用

【譯】前端知識儲備——Promise/A+規範

概述 自從準備晉級之後，就拖更了很久了，既然晉級弄完了，那麼也恢復更新了。 在面試別人的過程中，發現基本上沒有人對整個Promise完全瞭解，因此希望通過這篇文章來幫助大家瞭解下Promise的全貌。本文的主要內容是Promise/A+規範的譯文，主要是能夠幫助大家

老生常談-實現一個Promise

前言 在寫這個promise之前，希望你已經對es6中的Promise很熟悉了，概念性和基礎的東西就不再講了，不懂的同學可以去看看阮一峰老師的es6教程. 我主要按以下5個步驟來一步一步實現，非同步的實現我放在了後面，所以前面幾步暫不考慮 實現一個基本的MyPromise 實現then的鏈式呼叫

前端雜談: 如何實現一個 Promise?

前端雜談: 如何實現一個 Promise? 首先, 什麼是 Promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reaso

Promise進階——如何實現一個Promise庫

概述 從上次更新Promise/A+規範後，已經很久沒有更新部落格了。之前由於業務需要，完成了一個TypeScript語言的Promise庫。這次我們來和大家一步一步介紹下，我們如何實現一個符合Promise/A+規範的Promise庫。 如果對Promise/A+規範還不太瞭解的同學，建議先看看上一篇部

解析 Promise 原理，實現一個Promise

概述 這篇文章旨在解析 Promise的非同步實現原理，並且以 ES6中的 Promise 為藍本實現一個簡單的 Promise。 通過自己動手實現一個 Promise 物件，可以熟悉很多可能不知道的 Promise 細節，同時也能對非同步的理解更提升一步。

嘗試去實現一個Promise

function resolve_promise_value(promise,value) {//PromiseA+的實現 var then; /* ret false 說明沒有執行promise._resolve裡的函式

實現一個Promise-polyfill

Promise Promise是ES6標準提供的一個非同步操作的很好的語法糖，對於原本的回撥函式模式進行了封裝，實現了對於非同步操作的鏈式呼叫。並且配上generator以及async語法糖來使用更加方便。 雖然Promise當前在很多瀏覽器上都已經得到了支

手寫實現一個promise

function myPromise (callback) { let self = this; self.status = 'pending'; self.value = undefined; self.reason = undefined; self.fullF