step1 搭建框架

1. 首先我們需要在這里放置一個(gè)promise函數(shù)本體 后面要在里面添加resolve、reject的執(zhí)行函數(shù)

  function Promise(execotor) {}

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

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

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

resolve：返回的是一個(gè)指定結(jié)果的promise對(duì)象

  Promise.resolve = function (value) { }

reject：返回失敗狀態(tài)的方法

  Promise.reject = function (value) { }

all：返回一個(gè)promise對(duì)象，只有當(dāng)promise都返回的時(shí)候，這個(gè)狀態(tài)才算成功

  Promise.all = function (value) { }

race：返回一個(gè)promise對(duì)象，它的狀態(tài)是由第一個(gè)返回的對(duì)象確定的，這個(gè)race里面哪個(gè)函數(shù)先執(zhí)行完，就直接返回第一個(gè)值，其他的繼續(xù)執(zhí)行

  Promise.race = function (value) { }

4. 全局聲明mypromise

  window.Promise = Promise

5. 建立一個(gè)自執(zhí)行函數(shù) 將上述內(nèi)容全部包裹進(jìn)去

(function (window) {

})()

step2 填充搭建好了的Promise框架

1.填充function Promise()

（1）let self = this固定一個(gè)function內(nèi)部的this，這個(gè)this在后面會(huì)發(fā)揮很大作用

（2）self.status = 'pending'為Promise函數(shù)本體添加一個(gè)基礎(chǔ)狀態(tài)‘pending'

（3）self.data = undefined建立一個(gè)data源，用來存儲(chǔ)resolve傳回來的結(jié)果

（4）self.callbacks = []建立一個(gè)數(shù)組，用來將promise中的回調(diào)全部保存起來

2.填充function resolve()

（1）        if (self.status !== 'pending') {           return         }判斷當(dāng)前傳入進(jìn)程的狀態(tài)是否為pending，是就繼續(xù)下面的操作，不是就直接返回

promise內(nèi)部有三種狀態(tài)pending、resolved、rejected，這三種狀態(tài)都是一種開關(guān)變量，如果該狀態(tài)從pending轉(zhuǎn)為其他狀態(tài)后將無法改變。

（2）self.status = 'resolved'將該進(jìn)程的狀態(tài)改為resolved

（3）self.data = value將value存起來，待會(huì)then中的回調(diào)會(huì)需要使用該數(shù)據(jù)

（4）放上最重要的執(zhí)行函數(shù)部分，如果sele.data中有待執(zhí)行的callback函數(shù)，立即異步執(zhí)行它

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

3.填充function reject()

（1） 與resolve函數(shù)相同，此處簡略

4.填充execotor方法

promise主體在執(zhí)行時(shí)如果出錯(cuò)，錯(cuò)誤信息被catch捕捉，此時(shí)catch會(huì)跳至該函數(shù)來單獨(dú)執(zhí)行一個(gè)reject

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

5.填充.then函數(shù)

首先我們要區(qū)分傳入進(jìn)程的狀態(tài)，如果是pending狀態(tài)就把回調(diào)函數(shù)存起來，如果不是pending狀態(tài)就干點(diǎn)什么它應(yīng)該做的

（1）if (self.status === 'pending')如果當(dāng)前的狀態(tài)是pending的話，我們就把它保存起來

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

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

我們就開開心心的給它執(zhí)行一下

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

可是有這么一種狀態(tài)：resolve沒有執(zhí)行，但此時(shí)狀態(tài)卻已經(jīng)改變了，我們就不能執(zhí)行resolve而改為執(zhí)行rejected

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

經(jīng)過了如同怎么把大象塞進(jìn)冰箱一樣“簡略”的兩步，我們就實(shí)現(xiàn)了一個(gè)簡易的Promise　　　　　　　　　　　　　　　　　　　　　　　　

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

總結(jié)

到此這篇關(guān)于實(shí)現(xiàn)一個(gè)簡易promise的文章就介紹到這了,更多相關(guān)實(shí)現(xiàn)簡易promise內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論