手寫一個(gè)PromiseA+的實(shí)現(xiàn)

suxier 發(fā)布于2019-08-22 17:28 / 1388人閱讀

摘要：手寫一個(gè)的實(shí)現(xiàn)。當(dāng)注冊(cè)的回調(diào)函數(shù)返回的是的時(shí)候，從這個(gè)之后的所有的注冊(cè)函數(shù)都應(yīng)該注冊(cè)在新返回的上。直到遇到下一個(gè)回調(diào)函數(shù)的返回值也是。

Promise

手寫一個(gè)PromiseA+的實(shí)現(xiàn)。注意這里只是模擬，實(shí)際上原生的promise在事件隊(duì)列中屬于microTask。這里用setTimeout模擬不是特別恰當(dāng)。因?yàn)閟etTimeout是一個(gè)macroTask。

1. 最簡單的基本功能

/**
 * 定義Promise
 * 先實(shí)現(xiàn)一個(gè)最簡單的。用setTimeout模擬一個(gè)異步的請(qǐng)求。
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push(onFulfilled);
  }

  function resolve(value){
    callbacks.forEach(function(cb){
      cb(value);
    })
  }

  fn(resolve);
}


// 使用Promise
var p = new Promise(function(resolve){
  setTimeout(function(){
    resolve("這是響應(yīng)的數(shù)據(jù)")
  },2000)
})

p.then(function(response){
  console.log(response);
})

2.鏈?zhǔn)秸{(diào)用

/**
 * 先看一下前一個(gè)例子存在的問題
 * 1.在前一個(gè)例子中不斷調(diào)用then需要支持鏈?zhǔn)秸{(diào)用，每次執(zhí)行then都要返回調(diào)用對(duì)象本身。
 * 2.在前一個(gè)例子中，當(dāng)鏈?zhǔn)秸{(diào)用的時(shí)候，每次then中的值都是同一個(gè)值，這是有問題的。其實(shí)第一次then中的返回值，應(yīng)該是第二次調(diào)用then中的函數(shù)的參數(shù)，依次類推。
 * 所以，我們進(jìn)一步優(yōu)化一下代碼。
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }

  function resolve(value){
    callbacks.map(function(cb,index){
      if(index === 0){
        callbacks[index].value = value;
      }
      var rsp = cb.f(cb.value);
      if(typeof callbacks[index+1] !== "undefined"){
        callbacks[index+1].value = rsp;
      }
    })
  }
  fn(resolve);
}


// 使用Promise
var p = new Promise(function(resolve){
  setTimeout(function(){
    resolve("這是響應(yīng)的數(shù)據(jù)")
  },2000)
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

3. 異步

/**
 * 先看一下前一個(gè)例子存在的問題
 * 1. 如果在then方法注冊(cè)回調(diào)之前，resolve函數(shù)就執(zhí)行了，怎么辦？比如 new Promise的時(shí)候傳入的函數(shù)是同步函數(shù)的話，
 * then還沒被注冊(cè)，resolve就執(zhí)行了。。這在PromiseA+規(guī)范中是不允許的，規(guī)范明確要求回調(diào)需要通過異步的方式執(zhí)行。
 * 用來保證一致可靠的執(zhí)行順序。
 * 
 * 因此我們需要加入一些處理。把resolve里的代碼放到異步隊(duì)列中去。這里我們利用setTimeout來實(shí)現(xiàn)。
 * 原理就是通過setTimeout機(jī)制，將resolve中執(zhí)行回調(diào)的邏輯放置到JS任務(wù)隊(duì)列末尾，以保證在resolve執(zhí)行時(shí)，
 * then方法的回調(diào)函數(shù)已經(jīng)注冊(cè)完成
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }

  function resolve(value){
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = value;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== "undefined"){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}


// 使用Promise,現(xiàn)在即使是同步的立馬resolve，也能正常運(yùn)行了。
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

4. 狀態(tài)機(jī)制

/**
 * 先看一下前一個(gè)例子存在的問題
 * 1.前一個(gè)例子還存在一些問題，如果Promise異步操作已經(jīng)成功，在這之前注冊(cè)的所有回調(diào)都會(huì)執(zhí)行，
 * 但是在這之后再注冊(cè)的回調(diào)函數(shù)就再也不執(zhí)行了。具體的運(yùn)行下面這段代碼，可以看到“can i invoke”并沒有打印出來
 * 想要解決這個(gè)問題，我們就需要加入狀態(tài)機(jī)制了。具體實(shí)現(xiàn)看本文件夾下的另一個(gè)js文件里的代碼。
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }

  function resolve(value){
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = value;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== "undefined"){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}


// 
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
   })
},0)

/**
 * 在promise01.js中，我們已經(jīng)分析了，我們需要加入狀態(tài)機(jī)制
 * 在這里實(shí)現(xiàn)一下PromiseA+中關(guān)于狀態(tài)的規(guī)范。
 * 
 * Promises/A+規(guī)范中的2.1Promise States中明確規(guī)定了，pending可以轉(zhuǎn)化為fulfilled或rejected并且只能轉(zhuǎn)化一次，
 * 也就是說如果pending轉(zhuǎn)化到fulfilled狀態(tài)，那么就不能再轉(zhuǎn)化到rejected。
 * 并且fulfilled和rejected狀態(tài)只能由pending轉(zhuǎn)化而來，兩者之間不能互相轉(zhuǎn)換
 * 
 */
function Promise(fn){
  var status = "pending"
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    // 如果是pending狀態(tài)，則加入到注冊(cè)隊(duì)列中去。
    if(status === "pending"){
      callbacks.push({f:onFulfilled});
      return this;
    }
    // 如果是fulfilled 狀態(tài)，此時(shí)直接執(zhí)行傳入的注冊(cè)函數(shù)即可。
    onFulfilled(value);
    return this;
  }

  function resolve(newValue){
    value = newValue;
    status = "fulfilled";
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = newValue;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== "undefined"){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}


// 
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
   })
},1000)

/**
 * 剛才的例子中，確實(shí)打印出了 can i invoke，但是之前then的注冊(cè)函數(shù)的返回值，并沒有打印出來。
 * 也就是說 1 和 2 并沒有被打印出來，看下面的注釋
 * 
 */
function Promise(fn){
  var status = "pending"
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {

    if(status === "pending"){
      callbacks.push({f:onFulfilled});
      return this;
    }

    onFulfilled(value);
    return this;
  }

  function resolve(newValue){
    value = newValue;
    status = "fulfilled";
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = newValue;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== "undefined"){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}

var p = new Promise(function(resolve){
    resolve("aaaaaa")
})

p.then(function(response){
  console.log(response);    
  return 1;
}).then(function(response){
  console.log(response);  // 這里應(yīng)該打印的是45行返回的1，但是打印出來的確是aaaaaa
  return 2;  
}).then(function(response){
  console.log(response); // 這里應(yīng)該打印的是48行返回的2，但是打印出來的確是aaaaaa
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
   })
},1000)


/**
 * 問題的根源在于什么呢？
 * 問題的根源是每次的then的返回值都是p，當(dāng)狀態(tài)是fulfilled，執(zhí)行的是onFulfilled(value)
 * 此處的value是p的value，也就是fulfilled狀態(tài)的value。根據(jù)規(guī)范，promise應(yīng)該是只能發(fā)射單值。
 * 而我們?cè)O(shè)計(jì)了一個(gè)callback堆棧中有一系列的值。生生的把promise變成了多值發(fā)射。
 * 
 * 所以，調(diào)整思路，每個(gè)then都應(yīng)該返回一個(gè)promise，這個(gè)promise應(yīng)該是一個(gè)全新的promise。
 * 具體實(shí)現(xiàn)見下一個(gè)例子。
 */

/**
 * 根據(jù)剛才的分析，我們重新優(yōu)化一下代碼
 * 1.去掉之前的多值設(shè)計(jì)
 * 2.每次的then 返回的都是一個(gè)全新的promise
 *
 */
function Promise(fn){
  var status = "pending"
  var value= null;
  var callbacks = [];
  var self = this;

  this.then = function(onFulfilled) {
    return new Promise(function(resolve){
      function handle(value){
        var res = typeof onFulfilled === "function" ? onFulfilled(value) : value;
        resolve(res);
      }
      // 如果是pending狀態(tài)，則加入到注冊(cè)隊(duì)列中去。
      if(status === "pending"){
        callbacks.push(handle);
      // 如果是fulfilled 狀態(tài)。
      }else if(status === "fulfilled"){
          handle(value);
      }
    })
  }

  function resolve(newValue){
    value = newValue;
    status = "fulfilled";
    
    setTimeout(function(){
        callbacks.map(function(cb){
          cb(value);
        })
    },0)
  };

  fn(resolve);
}


// 
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
   })
},1000)



/**
 * 運(yùn)行一下，完美輸出
 * 先是輸出“這是響應(yīng)的數(shù)據(jù)”，然后是“1”，然后是“2”， 然后是“can i invoke?”
 * 
 * 接下來我們要好好整理一下代碼了。把一些公用的方法放到構(gòu)造函數(shù)的原型上去。改造之后的例子見下一個(gè)例子
 */

/**
 * 根據(jù)剛才的分析，我們重新優(yōu)化一下代碼
 * 1.把私有屬性掛到實(shí)例上去
 * 2.把公共方法掛到構(gòu)造函數(shù)的原型上去
 *
 */
function Promise(fn){
  this.status = "pending";
  this.value= null;
  this.callbacks = [];
  var self = this;
  function resolve(newValue){
    self.value = newValue;
    self.status = "fulfilled";
    setTimeout(function(){
      self.callbacks.map(function(cb){
          cb(value);
        })
    },0)
  }
  fn(resolve);
}


Promise.prototype = Object.create(null);
Promise.prototype.constructor = Promise;


Promise.prototype.then = function(onFulfilled){
  var self = this;
  return new Promise(function(resolve){
    function handle(value){
      var res = typeof onFulfilled === "function"?  onFulfilled(value) : value;
      resolve(res);
    }
    if(self.status==="pending"){
      self.callbacks.push(handle);
    }else if(self.status ==="fulfilled"){
      handle(self.value);
    }
  })
}

// 使用
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
   })
},1000)

5.處理注冊(cè)的函數(shù)返回值是promise的情況

/**
 * 不出意料，又要拋出問題了。當(dāng)then注冊(cè)的回調(diào)函數(shù)返回的是promise的時(shí)候，從這個(gè)then之后的所有then的注冊(cè)函數(shù)
 * 都應(yīng)該注冊(cè)在新返回的promise上。直到遇到下一個(gè)回調(diào)函數(shù)的返回值也是promise。
 * 
 * 實(shí)現(xiàn)思路：
 * 在handle中判斷注冊(cè)函數(shù)返回的是否是promise。如果是的話,則resolve這個(gè)返回的promise的值，具體代碼看一下36到38行
 * 
 */
function Promise(fn){
  this.status = "pending";
  this.value= null;
  this.callbacks = [];
  var self = this;
  function resolve(newValue){
    self.value = newValue;
    self.status = "fulfilled";
    setTimeout(function(){
      self.callbacks.map(function(cb){
          cb(value);
        })
    },0)
  }
  fn(resolve);
}


Promise.prototype = Object.create(null);
Promise.prototype.constructor = Promise;


Promise.prototype.then = function(onFulfilled){
  var self = this;
  var promise = new Promise(function(resolve){
    function handle(value){
      var res = typeof onFulfilled === "function"?  onFulfilled(value) : value;
      if(res instanceof Promise){
        promise = res;
        resolve(res.value);
      }else {
        resolve(res);
      }
    }
    if(self.status==="pending"){
      self.callbacks.push(handle);
    }else if(self.status ==="fulfilled"){
      handle(self.value);
    }
  })
  return promise;
}

// 使用
var p = new Promise(function(resolve){
    resolve("這是響應(yīng)的數(shù)據(jù)")
})

p.then(function(response){
  console.log(response);
  return new Promise(function(resolve){
    resolve("testtest")
  })
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})

setTimeout(function(){
   p.then(function(response){
     console.log("can i invoke?");
     return new Promise(function(resolve){
        resolve("hhhhhh")
      })
   }).then(function(response){
     console.log(response);
   })
},1000)

源碼全部在github上：https://github.com/JesseZhao1...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95209.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

suxier

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CUBECLOUD：雙十一降價(jià)，全線產(chǎn)品85折，洛杉磯Lite限時(shí)月付20元，洛杉磯Pro/Lite

閱讀 2983·2021-11-08 13:20
云主機(jī)怎么弄-云主機(jī)怎么使用？

閱讀 1043·2021-09-22 15:20
十分鐘復(fù)習(xí)CSS盒模型與BFC

閱讀 674·2019-08-30 15:53
層疊上下文與z-index

閱讀 1976·2019-08-30 15:43
2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

閱讀 1294·2019-08-29 17:21
瀏覽器渲染機(jī)制與相應(yīng)優(yōu)化策略

閱讀 548·2019-08-29 12:15
bug記錄：IE8，包含塊min-height/height共存時(shí)的高度計(jì)算bug

閱讀 2391·2019-08-28 17:51
javascript map()詳解

閱讀 3156·2019-08-26 13:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

手寫一個(gè)PromiseA+的實(shí)現(xiàn)

相關(guān)文章

啥？喝著闊落吃著西瓜就把Promise手寫出來了？？？

**一步一步實(shí)現(xiàn)一個(gè)符合PromiseA+規(guī)范的Promise庫（1）**

**Promise的源碼實(shí)現(xiàn)（完美符合Promise/A+規(guī)范）**

Promise 詳解

Promise 簡單實(shí)現(xiàn)

發(fā)表評(píng)論

0條評(píng)論

suxier

男|高級(jí)講師

TA的文章

CUBECLOUD：雙十一降價(jià)，全線產(chǎn)品85折，洛杉磯Lite限時(shí)月付20元，洛杉磯Pro/Lite

云主機(jī)怎么弄-云主機(jī)怎么使用？

十分鐘復(fù)習(xí)CSS盒模型與BFC

層疊上下文與z-index

2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

瀏覽器渲染機(jī)制與相應(yīng)優(yōu)化策略

bug記錄：IE8，包含塊min-height/height共存時(shí)的高度計(jì)算bug

javascript map()詳解

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

手寫一個(gè)PromiseA+的實(shí)現(xiàn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！