這是我自己最近學(xué)習(xí)promise的總結(jié)
在ES6中Promise被列為正式規(guī)范屯碴，也是ES6中最重要的特性之一描睦。

1.什么是Promise？是一個(gè)類导而？對(duì)象忱叭？數(shù)組隔崎？函數(shù)？

別猜了韵丑，直接在瀏覽器控制臺(tái)打印出來看看吧爵卒，console.dir(Promise)簡(jiǎn)單粗暴還直接。

1111.png

Promise 是異步編程的一種解決方案撵彻，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大钓株。

傳統(tǒng)的回調(diào)函數(shù)的寫法：

 step1(function (value1) {
    step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

Promises的寫法
(new Promise(step1)).then(step2) .then(step3).then(step4);
采用Promises寫法后，程序流程變得非常清楚陌僵，十分易讀轴合。

所謂Promise，簡(jiǎn)單說就是一個(gè)容器碗短，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果受葛。從語法上說，Promise 是一個(gè)對(duì)象偎谁，從它可以獲取異步操作的消息总滩。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理巡雨。

Promise對(duì)象有以下兩個(gè)特點(diǎn)闰渔。

1.對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作铐望，有三種狀態(tài)：pending（進(jìn)行中）冈涧、fulfilled（已成功）和rejected（已失敗）蝌以。只有異步操作的結(jié)果炕舵，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)跟畅。這也是Promise這個(gè)名字的由來咽筋，它的英語意思就是“承諾”，表示其他手段無法改變徊件。
2.一旦狀態(tài)改變奸攻，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果虱痕。Promise對(duì)象的狀態(tài)改變睹耐，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生部翘，狀態(tài)就凝固了硝训，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果。
Promise對(duì)象的缺點(diǎn)：首先窖梁，無法取消Promise赘风，一旦新建它就會(huì)立即執(zhí)行，無法中途取消纵刘。其次邀窃，如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤假哎，不會(huì)反應(yīng)到外部瞬捕。第三，當(dāng)處于pending狀態(tài)時(shí)舵抹，無法得知目前進(jìn)展到哪一個(gè)階段（即resolve狀態(tài)或者reject狀態(tài)）肪虎。

1.Promises的基本用法：

//new Promise時(shí)傳入的參數(shù)即為executor執(zhí)行函數(shù)并且包含兩個(gè)回調(diào)函數(shù)作為參數(shù) 分別是resolve(解決) reject(拒絕)

 let p=new Promise(function(resolve,reject){
    setTimeout(()=>{
        if(Math.random()>0.5){
            resolve("好好學(xué)習(xí)天天向上");//承諾成功
        }else{
            reject("休息會(huì)");//承諾失敗
        }
    },3000)
});
//p代表的是promise實(shí)例
p.then(function(data){//成功的回調(diào)函數(shù)
    console.log(data);
},function(err){//失敗的回調(diào)函數(shù)
    console.log(err);
})

上面代碼new Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)executor函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject惧蛹。then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)笋轨。第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞esolved時(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞ejected時(shí)調(diào)用赊淑。

//resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個(gè) Promise 實(shí)例例如：

 let p1 = new Promise(function (resolve, reject) {
  // ...
});
let p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面代碼中仅讽，p1和p2都是 Promise 的實(shí)例陶缺，但是p2的resolve方法將p1作為參數(shù)，即一個(gè)異步操作的結(jié)果是返回另一個(gè)異步操作洁灵。
注意饱岸，這時(shí)p1的狀態(tài)就會(huì)傳遞給p2，也就是說徽千，p1的狀態(tài)決定了p2的狀態(tài)苫费。如果p1的狀態(tài)是pending，那么p2的回調(diào)函數(shù)就會(huì)等待p1的狀態(tài)改變双抽；如果p1的狀態(tài)已經(jīng)是resolved或者rejected百框，那么p2的回調(diào)函數(shù)將會(huì)立刻執(zhí)行。

2.Promise.prototype.then()

Promise 實(shí)例具有then方法牍汹，也就是說铐维，then方法是定義在原型對(duì)象。Promise.prototype上的慎菲。它的作用是為 Promise 實(shí)例添加狀態(tài)改變時(shí)的回調(diào)函數(shù)嫁蛇。前面說過，then方法的第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù)露该，第二個(gè)參數(shù)（可選）是rejected狀態(tài)的回調(diào)函數(shù)睬棚。then方法返回的是一個(gè)新的Promise實(shí)例（注意，不是原來那個(gè)Promise實(shí)例）。因此可以采用鏈?zhǔn)綄懛ㄒ值常磘hen方法后面再調(diào)用另一個(gè)then方法包警。
鏈?zhǔn)秸{(diào)用的特點(diǎn)會(huì)將第一個(gè)then中不管是成功還是失敗，將它的返回值作為下一次成功回調(diào)函數(shù)的參數(shù)
代碼例子：

 let p=new Promise(function(resolve,reject){
    resolve(100);
});
p.then(function(data){
    return data+100;
},function(err){
    
}).then(function(data){
    console.log(data);//200
});

上面代碼中新荤，第一個(gè)then方法指定的回調(diào)函數(shù)揽趾，返回的是另一個(gè)Promise對(duì)象。這時(shí)苛骨，第二個(gè)then方法指定的回調(diào)函數(shù)篱瞎，就會(huì)等待這個(gè)新的Promise對(duì)象狀態(tài)發(fā)生變化。如果變?yōu)閞esolved痒芝，就調(diào)用resolve參數(shù)俐筋，如果狀態(tài)變?yōu)閞ejected，就調(diào)用rejecte參數(shù)(可選)严衬。最后data的值是200.

3.Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名澄者，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。代碼運(yùn)行中拋出錯(cuò)誤會(huì)被catch捕獲请琳，異常處理粱挡。

代碼：
//catch原理就是只傳失敗的回調(diào)

Promise.prototype.catch = function(onRejected){
  this.then(null,onRejected);
}

4.Promise.all()

Promise.all方法用于可以傳入多個(gè) Promise 實(shí)例，全部執(zhí)行完后會(huì)將結(jié)果以數(shù)組的方式返回俄精，如果有一個(gè)失敗就失敗了
代碼：

 let p=new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(1);
    },1000)
})
let p1=new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(2);
    },2000)
})
let p2=new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(3);
    },3000)
})
Promise.all([p,p1,p2]).then(function(value){
    console.log(value);//[1,2,3]
},function(reason){
    console.log(reason);
});

面代碼中询筏，Promise.all「誰跑的慢，以誰為準(zhǔn)執(zhí)行回調(diào)」方法接受一個(gè)數(shù)組作為參數(shù)竖慧，p嫌套、p1、p2都是 Promise 實(shí)例圾旨，只有p踱讨、p1、p2的狀態(tài)都變成fulfilled砍的， then的狀態(tài)才會(huì)變成fulfilled痹筛，此時(shí)p、p1廓鞠、p2的返回值組成一個(gè)數(shù)組味混，傳遞給resolve回調(diào)函數(shù)。
p诫惭、p1翁锡、p2之中有一個(gè)被rejected，then的狀態(tài)就變成rejected夕土，此時(shí)第一個(gè)被reject的實(shí)例的返回值馆衔，會(huì)傳遞給reject回調(diào)函數(shù)瘟判。

5.Promise.race()

Promise.race方法同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例角溃。Promise.race方法的參數(shù)與Promise.all方法一樣
代碼：

 var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});
Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // 兩個(gè)都完成拷获，但 p2 更快
});

上面代碼中，「誰跑的快减细，以誰為準(zhǔn)執(zhí)行回調(diào)」匆瓜，這就是race方法，這個(gè)詞本來就是賽跑的意思未蝌。

6.Promise.reject

Promise.reject方法返回一個(gè)立刻失敗的promise
代碼：

 Promise.reject(new Error("fail")).then(function(data) {
  // 未被調(diào)用
}, function(error) {
  console.log(error); // Error: fail
});

7.Promise.resolve

Promise.resolve方法返回一個(gè)立刻成功的promise
代碼：

 Promise.resolve("Success").then(function(value) {
  console.log(value); // "Success"
}, function(error) {
  // 不會(huì)被調(diào)用
});

用Promise-es5來實(shí)現(xiàn)兼容低版本瀏覽器的庫(kù)

const PENDING =  'pending';//初始態(tài)
const FULFILLED =  'fulfilled';//初始態(tài)
const REJECTED =  'rejected';//初始態(tài)
function Promise(executor){
  let self = this;//先緩存當(dāng)前promise實(shí)例
  self.status = PENDING;//設(shè)置狀態(tài)
  //定義存放成功的回調(diào)的數(shù)組
  self.onResolvedCallbacks = [];
  //定義存放失敗回調(diào)的數(shù)組
  self.onRejectedCallbacks = [];
  //當(dāng)調(diào)用此方法的時(shí)候驮吱，如果promise狀態(tài)為pending,的話可以轉(zhuǎn)成成功態(tài),如果已經(jīng)是成功態(tài)或者失敗態(tài)了，則什么都不做
  //2.1
  function resolve(value){ //2.1.1
    if(value!=null &&value.then&&typeof value.then == 'function'){
      return value.then(resolve,reject);
    }
    //如果是初始態(tài)萧吠，則轉(zhuǎn)成成功態(tài)
    setTimeout(function(){//使用setTimeout包裹一層的原因：1.是官網(wǎng)規(guī)定左冬。2.是為了不管是同步還是異步，統(tǒng)一狀態(tài)
      if(self.status == PENDING){
        self.status = FULFILLED;
        self.value = value;//成功后會(huì)得到一個(gè)值纸型，這個(gè)值不能改
        //調(diào)用所有成功的回調(diào)
        self.onResolvedCallbacks.forEach(cb=>cb(self.value));
      }
    })
  }
  function reject(reason){ //2.1.2
    setTimeout(function(){
      //如果是初始態(tài)拇砰，則轉(zhuǎn)成失敗態(tài)
      if(self.status == PENDING){
        self.status = REJECTED;
        self.value = reason;//失敗的原因給了value
        self.onRejectedCallbacks.forEach(cb=>cb(self.value));
      }
    });
  }
  try{
    //因?yàn)榇撕瘮?shù)執(zhí)行可能會(huì)異常，所以需要捕獲狰腌，如果出錯(cuò)了除破，需要用錯(cuò)誤 對(duì)象reject
    executor(resolve,reject);
  }catch(e){
    //如果這函數(shù)執(zhí)行失敗了，則用失敗的原因reject這個(gè)promise
    reject(e);
  };
}
function resolvePromise(promise2,x,resolve,reject){
  if(promise2 === x){
    return reject(new TypeError('循環(huán)引用'));
  }
  let called = false;//promise2是否已經(jīng)resolve 或reject了
  if(x instanceof Promise){
    if(x.status == PENDING){
      x.then(function(y){
        resolvePromise(promise2,y,resolve,reject);
      },reject);
    }else{
      x.then(resolve,reject);
    }
  //x是一個(gè)thenable對(duì)象或函數(shù)琼腔，只要有then方法的對(duì)象皂岔，
  }else if(x!= null &&((typeof x=='object')||(typeof x == 'function'))){
    //當(dāng)我們的promise和別的promise進(jìn)行交互，編寫這段代碼的時(shí)候盡量的考慮兼容性展姐，允許別人瞎寫
   try{
     let then = x.then;
     if(typeof then == 'function'){
       //有些promise會(huì)同時(shí)執(zhí)行成功和失敗的回調(diào)
       then.call(x,function(y){
         //如果promise2已經(jīng)成功或失敗了，則不會(huì)再處理了
          if(called)return;
          called = true;
          resolvePromise(promise2,y,resolve,reject)
       },function(err){
         if(called)return;
         called = true;
         reject(err);
       });
     }else{
       //到此的話x不是一個(gè)thenable對(duì)象剖毯，那直接把它當(dāng)成值resolve promise2就可以了
       resolve(x);
     }
   }catch(e){
     if(called)return;
     called = true;
     reject(e);
   }
  }else{
    //如果X是一個(gè)普通 的值圾笨，則用x的值去resolve promise2
    resolve(x);
  }
}
//onFulfilled 是用來接收promise成功的值或者失敗的原因
Promise.prototype.then = function(onFulfilled,onRejected){
  //如果成功和失敗的回調(diào)沒有傳，則表示這個(gè)then沒有任何邏輯逊谋，只會(huì)把值往后拋
  //2.2.1
  onFulfilled = typeof onFulfilled == 'function'?onFulfilled:function(value){return  value};
  onRejected = typeof onRejected == 'function'?onRejected:reason=>{throw reason};
  //如果當(dāng)前promise狀態(tài)已經(jīng)是成功態(tài)了擂达，onFulfilled直接取值
  let self = this;
  let promise2;
  if(self.status == FULFILLED){
    return promise2 = new Promise(function(resolve,reject){
      setTimeout(function(){
        try{
          let x =onFulfilled(self.value);
          //如果獲取到了返回值x,會(huì)走解析promise的過程
          resolvePromise(promise2,x,resolve,reject);
        }catch(e){
          //如果執(zhí)行成功的回調(diào)過程中出錯(cuò)了钻趋，用錯(cuò)誤原因把promise2 reject
          reject(e);
        }
      })
    });
  }
  if(self.status == REJECTED){
    return promise2 = new Promise(function(resolve,reject){
      setTimeout(function(){
        try{
          let x =onRejected(self.value);
          resolvePromise(promise2,x,resolve,reject);
        }catch(e){
          reject(e);
        }
      })
    });
  }
  if(self.status == PENDING){
   return promise2 = new Promise(function(resolve,reject){
     self.onResolvedCallbacks.push(function(){
         try{
           let x =onFulfilled(self.value);
           //如果獲取到了返回值x,會(huì)走解析promise的過程
           resolvePromise(promise2,x,resolve,reject);
         }catch(e){
           reject(e);
         }
     });
     self.onRejectedCallbacks.push(function(){
         try{
           let x =onRejected(self.value);
           resolvePromise(promise2,x,resolve,reject);
         }catch(e){
           reject(e);
         }
     });
 });
  }
}
//catch原理就是只傳失敗的回調(diào)
Promise.prototype.catch = function(onRejected){
  this.then(null,onRejected);
}
Promise.deferred = Promise.defer = function(){
  let defer = {};
  defer.promise = new Promise(function(resolve,reject){
    defer.resolve = resolve;
    defer.reject = reject;
  });
  return defer;
}
function gen(times,cb){
  let result = [],count=0;
  return function(i,data){
    result[i] = data;
    if(++count==times){
      cb(result);
    }
  }
}
Promise.all = function(promises){
 return new Promise(function(resolve,reject){
   let done = gen(promises.length,resolve);
   for(let i=0;i<promises.length;i++){
     promises[i].then(function(data){
       done(i,data);
     },reject);
   }
 });
}
Promise.race = function(promises){
  return new Promise(function(resolve,reject){
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject);
    }
  });
}
//返回一個(gè)立刻成功的promise
//別人提供 給你一個(gè)方法弯蚜，需要你傳入一個(gè)promise,但你只有一個(gè)普通的值狡门，你就可以通過這個(gè)方法把這個(gè)普通的值(string number object)轉(zhuǎn)成一個(gè)promise對(duì)象
Promise.resolve = function(value){
  return new Promise(function(resolve){
    resolve(value);
  });
}
//返回一個(gè)立刻失敗的promise
Promise.reject = function(reason){
  return new Promise(function(resolve,reject){
    reject(reason);
  });
}
module.exports = Promise;

參考資料:
Promise/A+規(guī)范

JavaScript Promise迷你書(中文版)