目錄

• step1 搭建框架
• step2 填充搭建好了的Promise框架
• 總結

step1 搭建框架

1. 首先我們需要在這裡放置一個promise函式本體 後面要在裡面新增resolve、reject的執行函式

  function Promise(execotor) {}

2. 原裝promise中有then與catch這兩個主要的方法，所以我們要給promise的原型掛載then與catch

  Promise.prototype.then = function (onResolved,onRejected) {}
  Promise.prototype.catch = function (onRejected) {}

3. 給promise掛載幾個常見方法 resolve、reject、all、race等等

resolve：返回的是一個指定結果的promise物件

  Promise.resolve = function (value) { }

reject：返回失敗狀態的方法

  Promise.reject = function (value) { }

all：返回一個promise物件，只有當promise都返回的時候，這個狀態才算成功

  Promise.all = function (value) { }

race：返回一個promise物件，它的狀態是由第一個返回的物件確定的，這個race裡面哪個函式先執行完，就直接返回第一個值，其他的繼續執行

  Promise.race = function (value) { }

4. 全域性宣告myproyiApEodmise

  window.Promise = Promise

5. 建立一個自執行函式 將上述內容全部包裹進去

(function (window) {

})()

step2 填充搭建好了的Promise框架

1.填充function Promise()

（1）let self = this固定一個function內部的this，這個this在後面會發揮很大作用

（2）self.status = 'pending'為Promise函式本體新增一個基礎狀態‘pending'

（3）self.data = undefined建立一個data源，用來儲存resolve傳回來的結果

（4）self.callbacks = []建立一個數組，用來將promise中的回撥全部儲存起來

2.填充function resolve()

（1） if (self.status !== 'pending') { return&nbsyiApEodp; }判斷當前傳入程序的狀態是否為pending，是就繼續下面的操作，不是就直接返回

promise內部有三種狀態pending、resolved、rejected，這三種狀態都是一種開關變數，如果該狀態從pending轉為其他狀態後將無法改變。

（2）self.status = 'resolved'將該程序的狀態改為resolved

（3）self.data = value將value存起來，待會then中的回撥會需要使用該資料

（4）放上最重要的執行函式部分，如果sele.data中有待執行的callback函式，立即非同步執行它

    if (self.callbacks.length > 0) {
      setTimeout(() => {
        self.callbacks.forEach(callbackObj => {
          callbackObj.onResolved(value)
        })
      },0)
    }

3.填充function reject()

（1） 與resolve函式相同，此處簡略

4.填充execotor方法

promise主體在執行時如果出錯，錯誤資訊被catch捕捉，此時catch會跳至該函式來單獨執行一個reject

     try {
       execotor(resolve,reject)
     } catch (error) {
       reject(error)
     }

5.填充.then函式

首先我們要區分傳入程序的狀態，如果是pending狀態就把回撥函式存起來，如果不是pending狀態就乾點什麼它應該做的

（1）if (self.status === 'pending')如果當前的狀態是pendinyiApEodg的話，我們就把它儲存起來

    self.callbacks.push({
      onResolved() { onResolved(self.data) },onRejected() { onRejected(self.data) }
    })

（2）else if (self.status === 'resolved')如果status的狀態是resolved

我們就開開心心的給它執行一下

    setTimeout(() => {
      onResolved(self.data)
    },0)

可是有這麼一種狀態：resolve沒有執行，但此時狀態卻已經改變了，我們就不能執行resolve而改為執行rejected

   else{
     setTimeout(() => {
       onRejecyed(self.data)
     },0)
   }

經過了如同怎麼把大象塞進冰箱一樣“簡略”的兩步，我們就實現了一個簡易的Promise　　　　　　　　　　　　　　　　　　　　　　　　

是不是很簡單呀，快叫上身邊的小夥伴一起來試一試吧！

總結

到此這篇關於實現一個簡易promise的文章就介紹到這了,更多相關實現簡易promise內容請搜尋我們以前的文章或繼續瀏覽下面http://www.cppcns.com的相關文章希望大家以後多多支援我們！