摘要：上網(wǎng)查了一下好像是標(biāo)準(zhǔn)第二步開寫構(gòu)造函數(shù)什么都不想，先寫一個(gè)構(gòu)造函數(shù)，就叫把。對(duì)構(gòu)造函數(shù)再次做修改。并且可以一個(gè)值。給下一個(gè)繼續(xù)調(diào)用。應(yīng)該是一個(gè)新的。最后的版本總結(jié)后來去看了看別人實(shí)現(xiàn)的方法。

都8102年為什么還要寫promise實(shí)現(xiàn)? 
?    年前和年后面試了幾家公司, 雖然都掛了… 但是都談到了一個(gè)面試題,就是promise. 雖然使用promise很簡(jiǎn)單,而且我回答的都沒問題.
?    但是面試官都問到了一個(gè)題目. "如果讓你實(shí)現(xiàn)一個(gè)promise.all方法, 怎么實(shí)現(xiàn) ? " 臨時(shí)想了一個(gè)每個(gè)promise.then里用計(jì)數(shù)器+1, 在判斷計(jì)數(shù)器是否等于參數(shù)Array[promise]的 length 來判斷promise是否都完成的實(shí)現(xiàn)思路, 也不知道算不算是對(duì)的.
?    然后就回來想自己能不能在不看任何人的代碼的情況下, 實(shí)現(xiàn)一個(gè)promise。

var a = new Promise(function( resolve, reject ){})

new一個(gè)Promise實(shí)例，傳入一個(gè)函數(shù)，里面有兩個(gè)參數(shù)。

resolve：成功時(shí)調(diào)用，并將成功后的數(shù)據(jù)傳進(jìn)then方法里。

reject：失敗的時(shí)候調(diào)用，并將失敗的數(shù)據(jù)傳進(jìn)catch方法里。

很簡(jiǎn)單，只有我們常見的then catch還有finally方法。不過finally方法應(yīng)該不屬于ES6標(biāo)準(zhǔn)的，所以先忽略。（上網(wǎng)查了一下好像是ES2018標(biāo)準(zhǔn)）

什么都不想，先寫一個(gè)構(gòu)造函數(shù)，就叫 Future 把。

因?yàn)镻romise有兩種狀態(tài)，所以我給他加一個(gè) status。

function Future(func){
  this.status = null;
}

? 接著需要執(zhí)行傳入的函數(shù)，并傳給他一個(gè)resolve和reject方法。經(jīng)常用Promise的同學(xué)應(yīng)該知道 Promise.resolve 和 Promise.reject。

? 但是沒在原型里找到這兩個(gè)方法，所以我就直接在Future上加這兩個(gè)方法。

// 只要執(zhí)行了resolve或者reject肯定要改變status, 所以對(duì)實(shí)例的status做更新
Future.resolve = function (data) {
  this.status = "resolve"
  this.data = data
}

Future.reject = function (data) {
  this.status = "reject"
  this.data = data
}

這兩個(gè)這里的data要在then里用，所以還是得緩存起來，然后將這兩個(gè)方法傳進(jìn)func里，這里對(duì)構(gòu)造函數(shù)再做改動(dòng)

function Future(func){
  this.status = null;
  this.data = null;
  
  func(Future.resolve, Future.resolve)
}

? 但是這里有一個(gè)問題，resolve執(zhí)行的時(shí)候，this并不是指向當(dāng)前的promise實(shí)例的，這時(shí)我就想到了bind方法。所以必須在初始化的時(shí)候把resolve和reject的作用域給綁定好。對(duì)構(gòu)造函數(shù)再次做修改。( 還要加上setTimeout , 加入even loop，這個(gè)是后加的)

function Future(func){
  if(typeOf func !== "function") throw new Errow("Future 的參數(shù)必須為函數(shù)");
  
  var _this = this;
  this.status = null;
  this.data = null;
  setTimeout(function () {
    func(Future.resolve.bind(_this), Future.resolve.bind(_this))
  })
}

回顧一下then的使用方式：傳入一個(gè)函數(shù)，在promise執(zhí)行resolve后，才會(huì)調(diào)用，并且函數(shù)的參數(shù)就是調(diào)用resolve的時(shí)候傳入的值。并且可以return一個(gè)值。給下一個(gè)then繼續(xù)調(diào)用。

? 所以then函數(shù)應(yīng)該很簡(jiǎn)單，直接緩存這個(gè)函數(shù)，resolve的時(shí)候再拿出來調(diào)用即可。而關(guān)于鏈?zhǔn)秸{(diào)用，一開始想到的就是return this

? 所以一開始我先是這么寫的

function Future(func){
      //再加一個(gè)函數(shù)隊(duì)列數(shù)組和一個(gè)錯(cuò)誤狀態(tài)的執(zhí)行函數(shù)
      this.queue = [];
      this.failCb = null;
     ...其余代碼省略
}

Future.prototype.then = function (callback) {
      if(typeof callback !== "function") throw new Errow("then必須傳入函數(shù)");
  
    if(this.status === "resolve"){
        this.data = callback(this.data);
    }else if(this.status === null){
        this.queue.push(callback);
   }

   return this;
}

Future.prototype.catch = function (callback) {
      if(typeof callback !== "function") throw new Errow("catch必須傳入函數(shù)");
  
    if (this.status === "reject") {
        this.data = callback(this.data);
    }else if(this.status === null){
        this.failCb = callback;
    }
  
    return this;
}

? 其他的都好了，接著就是在resolve里去執(zhí)行隊(duì)列里的函數(shù)。reject里執(zhí)行錯(cuò)誤函數(shù)。

Future.resolve = function (data) {
    var context = this;
    context.status = "resolve";
    context.data = data;
  
      //先把第一個(gè)函數(shù)拿出來
    var func = context.queue.shift();
    if(func){
        try{
            var d = func(data);
              //函數(shù)可以返回一個(gè)值，也可以返回一個(gè)promise
            if(d instanceof Future){
                d = d.data;
            }
              //遞歸的方式再執(zhí)行下一個(gè)，這里再用call去改變this的指向
            Future.resolve.call(context, d);
        }catch(err){
              //捕捉報(bào)錯(cuò)，執(zhí)行catch
            Future.reject.call(context, err);
        }
    }
}

Future.reject = function (data) {
    this.status = "reject";
    this.data = data;
    if(this.failCb){
        this.failCb(data)
    }else{
        throw new Error("promise catch")
    }
}

以上。

? 到這里呢，就是那時(shí)臨時(shí)想臨時(shí)做的第一版。

? 當(dāng)然，后面又大改了一些東西。最主要的是then函數(shù)不應(yīng)該返回this。應(yīng)該是一個(gè)新的promise。如果按照現(xiàn)在這么做，經(jīng)過多個(gè)then之后，初始的data就變成了最后一個(gè)值了。我們希望的是要保留最初初始化的時(shí)候的那個(gè)值。

//比如
var a = new Future(function(resolve, reject){
    setTimeout(function(){
        console.log("success")
        resolve(true)
    }, 1000)
})

a.then(function(res){
    console.log(res);
    return "啦拉拉"
})

setTimeout(function(){
    a.then(function(res){
          //這里就會(huì)輸出 "啦拉拉"。其實(shí)期望的是輸出 true
        console.log("settimeout: ", res)
    })
},2000)

? 后來為了解決這個(gè)，突然陷入了牛角尖。。。花了一天才做完。水平有限，只能做到這樣了，最后附上完整代碼吧。

最后的版本

? 后來去看了看別人實(shí)現(xiàn)的方法。大體思路應(yīng)該也是差不多的。其實(shí)就做個(gè)記錄總結(jié)，方便以后面試用。嘻嘻(^__^)。