一、基本概念

1-1 什么是Promise？

Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果
Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。

1-2 Promise三种状态
pending：在过程中还没有结果，pending状态不会触发then和catch
fulfiled：成功；fulfiled状态会触发后续的then回调函数
rejected：失败；rejected状态会触发后续的catch回调函数

1-3 Promise作用
Promise可以解决异步的问题（但Promise本身不是异步的）
Promise可以解决回调地狱，代码难以维护
Promise可以支持多个并发的请求，获取并发请求中的数据

二、Promise使用
Promise是一个构造函数，自身有all、reject、resolve这几个方法，原型上有then、catch等方法
Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：resolve 异步操作执行成功后的回调函数
，reject 异步操作执行失败后的回调函数

2-1 Promise.prototype.then
实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多
当Promise的触发resolve方法时，状态变为fulfiled，触发reject方法时，状态变为rejected
then是Promise实例的方法，then方法可以接受两个参数，第一个指定resolve的回调，第二个指定reject的回调 ```javascript let p = new Promise((resolve, reject) => { setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的随机数 if(num <= 5){
```
resolve(num);
```
} else{
```
reject('数字太大了');
```
} }, 2000); }); p.then((data) => { console.log(‘resolved’,data); },(err) => { console.log(‘rejected’,err); });

<a name="JClMI"></a>
#### 2-2 Promise.prototype.catch
- Promise实例的catch方法和then方法的第二个参数作用一样，都是指定reject的回调
- 但是catch方法有另外一个作用，就是在执行resolve的回调（也就是then方法中的第一个参数）时，如果代码出错抛出异常了，那么并不会报错卡死，而是会进到这个catch方法中，与try/catch语句有相同的功能
```javascript
p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此处的somedata未定义
})
.catch((err) => {
    console.log('rejected',err); // rejected somedata is not defined
});

2-3 Promise.all

all是Promise的类方法，用于将多个Promise实例，包装成一个新的Promise实例
all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调 ```javascript let Promise1 = new Promise(function(resolve, reject){}) let Promise2 = new Promise(function(resolve, reject){}) let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){ // 三个Promise对象的状态都变成fulfilled，p的状态才会变成fulfilled }, function(){ // 只要三个Promise对象有其中一个状态变成rejected，p的状态就变成rejected })

Promise.all 源码实现
```javascript
Promise.myAll = (promises) => {
  return new Promise((resolve, reject) => {
    // 计数器
    let count = 0
    // 存放结果
    let result = []
    const len = promises.length
    if (len === 0) {
      return resolve([])
    }
    promises.forEach((p, i) => {
      // 注意有的数组项有可能不是Promise，需要手动转化一下
      Promise.resolve(p).then((res) => {
        count += 1
        // 收集每个Promise的返回值 
        result[ i ] = res
        // 当所有的Promise都成功了，那么将返回的Promise结果设置为result
        if (count === len) {
          resolve(result)
        }
        // 监听数组项中的Promise catch只要有一个失败，那么我们自己返回的Promise也会失败
      }).catch(reject)
    })
  })
}
// 测试一下
const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
  setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 3000)
})
const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.myAll([ p1, p2, p3 ])
    .then(console.log) // [ 1, 2, 3 ]
      .catch(console.log)
// 2. 有一个Promise失败了
const p12 = Promise.myAll([ p1, p2, p4 ])
    .then(console.log)
      .catch(console.log) // err4
// 3. 有两个Promise失败了，可以看到最终输出的是err4，第一个失败的返回值
const p13 = Promise.myAll([ p1, p4, p5 ])
    .then(console.log)
      .catch(console.log) // err4
// 与原生的Promise.all返回是一致的

2-4 Promise.race

race是Promise的类方法，用法就是谁跑的快，以谁为准执行回调
race的使用场景，可以用作给某个异步请求设置超时时间，并且在超时后执行相应的操作
```
//请求某个图片资源
function requestImg(){
var p = new Promise((resolve, reject) => {
  var img = new Image();
  img.onload = function(){
    resolve(img);
  }
  img.src = '图片的路径';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('图片请求超时');
  }, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
```
代码解析：requestImg函数会异步请求一张图片，这里把地址写为”图片的路径”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。
2-5 Promise.resolve
Promise.resolve(value)返回一个以 value 值解析后的 Promise 对象 ```javascript // 情况1 value 本身就是 Promise 对象，则该对象作为 Promise.resolve 方法的返回值返回 function fn(resolve){ setTimeout(function(){
```
  resolve(123);
```
},3000); } let p0 = new Promise(fn) let p1 = Promise.resolve(p0) console.log(p1) // Promise {} console.log(p1) // Promise {: 123}

// 情况2 value 是个 thenable（即带有 then 方法），返回 thenable 的最终状态 let p = Promise.resolve($.ajax(‘/test/test.json’)) p.then(function(value){ console.log(value); });

// 情况2 value 是普通值 let p = Promise.resolve(123) console.log(p) // Promise {: 123}

Promise.resolve(value) 源码实现
```javascript
Promise.myResolve = function (value) {
  // 是Promise实例，直接返回即可
  if (value && typeof value === 'object' && (value instanceof Promise)) {
    return value
  }
  // 否则其他情况一律再通过Promise包装一下 
  return new Promise((resolve) => {
    resolve(value)
  })
}
// 测试一下，还是用刚才的例子
// 1. 非Promise对象，非thenable对象
Promise.myResolve(1).then(console.log) // 1
// 2. Promise对象成功状态
const p2 = new Promise((resolve) => resolve(2))
Promise.myResolve(p2).then(console.log) // 2
// 3. Promise对象失败状态
const p3 = new Promise((_, reject) => reject('err3'))
Promise.myResolve(p3).catch(console.error) // err3
// 4. thenable对象
const p4 = {
  then (resolve) {
    setTimeout(() => resolve(4), 1000)
  }
}
Promise.myResolve(p4).then(console.log) // 4
// 5. 啥都没传
Promise.myResolve().then(console.log) // undefined

三、根据promiseA+ 实现 Promise

3-1 实现成功和失败的回调方法

首先，需要创建一个Promise类，在使用的时候传入了一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)

class Promise {
constructor (executor){
  //默认状态是等待状态
  this.status = 'panding';
  this.value = undefined;
  this.reason = undefined;
  //存放成功的回调
  this.onResolvedCallbacks = [];
  //存放失败的回调
  this.onRejectedCallbacks = [];
  let resolve = (data) => {
    if(this.status === 'pending'){ //this指的是实例
      this.value = data;
      this.status = "resolved";
      this.onResolvedCallbacks.forEach(fn => fn());
    }
  }
  let reject = (reason) => {
    if(this.status === 'pending'){
      this.reason = reason;
      this.status = 'rejected';
      this.onRejectedCallbacks.forEach(fn => fn());
    }
  }
  // promise A+规范规定，在有异常错误时，则执行失败函数。
  try{//执行时可能会发生异常
    executor(resolve,reject);
  }catch (e){
    reject(e);//promise失败了
  }
}

3-2 then方法链式调用

把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入一个数组。这就是为何会在上面定义两个数组，且分别在resolve()和reject()遍历两个数组的原因。因此，在调用resolve()或者reject()之前，如果在pending状态时，会把多次then中的结果存入数组中

then(onFulFilled, onRejected) {
if (this.status === 'resolved') {
  onFulFilled(this.value);
}
if (this.status === 'rejected') {
  onRejected(this.reason);
}
// 当前既没有完成 也没有失败
if (this.status === 'pending') {
  // 存放成功的回调
  this.onResolvedCallbacks.push(() => {
    onFulFilled(this.value);
  });
  // 存放失败的回调
  this.onRejectedCallbacks.push(() => {
    onRejected(this.reason);
  });
}
}

Promise A+规范中规定then方法可以链式调用，在Promise中，要实现链式调用返回的结果是返回一个新的promise，第一次then中返回的结果，无论是成功或失败，都将返回到下一次then中的成功态中，但在第一次then中如果抛出异常错误，则将返回到下一次then中的失败态中

链式调用成功会返回值，有多种情况，根据举的例子，大致列出可能会发生的结果。因此将链式调用返回的值单独写一个方法。方法中传入四个参数，分别是p2，x，resolve，reject，其中p2指的是上一次返回的promise，x表示运行promise返回的结果，resolve和reject是p2的方法。则代码写为：

function resolvePromise(promise2,x,resolve,reject){
  //判断x是不是promise
  //规范中规定：我们允许别人乱写，这个代码可以实现我们的promise和别人的promise 进行交互
  if(promise2 === x){//不能自己等待自己完成
      return reject(new TypeError('循环引用'));
  };
  // x是除了null以外的对象或者函数
  if(x !=null && (typeof x === 'object' || typeof x === 'function')){
      let called;//防止成功后调用失败
      try{//防止取then是出现异常  object.defineProperty
          let then = x.then;//取x的then方法 {then:{}}
          if(typeof then === 'function'){//如果then是函数就认为他是promise
              //call第一个参数是this，后面的是成功的回调和失败的回调
              then.call(x,y => {//如果Y是promise就继续递归promise
                  if(called) return;
                  called = true;
                  resolvePromise(promise2,y,resolve,reject)
              },r => { //只要失败了就失败了
                  if(called) return;
                  called = true;
                  reject(r);  
              });
          }else{//then是一个普通对象，就直接成功即可
              resolve(x);
          }
      }catch (e){
          if(called) return;
          called = true;
          reject(e)
      }
  }else{//x = 123 x就是一个普通值 作为下个then成功的参数
      resolve(x)
  }
}

3-3 完整 PromiseA+ 源码

```javascript function resolvePromise(promise2,x,resolve,reject){ //判断x是不是promise //规范中规定：我们允许别人乱写，这个代码可以实现我们的promise和别人的promise 进行交互 if(promise2 === x){//不能自己等待自己完成

  return reject(new TypeError('循环引用'));

}; // x是除了null以外的对象或者函数 if(x !=null && (typeof x === ‘object’ || typeof x === ‘function’)){

  let called;//防止成功后调用失败
  try{//防止取then是出现异常  object.defineProperty
      let then = x.then;//取x的then方法 {then:{}}
      if(typeof then === 'function'){//如果then是函数就认为他是promise
          //call第一个参数是this，后面的是成功的回调和失败的回调
          then.call(x,y => {//如果Y是promise就继续递归promise
              if(called) return;
              called = true;
              resolvePromise(promise2,y,resolve,reject)
          },r => { //只要失败了就失败了
              if(called) return;
              called = true;
              reject(r);  
          });
      }else{//then是一个普通对象，就直接成功即可
          resolve(x);
      }
  }catch (e){
      if(called) return;
      called = true;
      reject(e)
  }

}else{//x = 123 x就是一个普通值作为下个then成功的参数

  resolve(x)

}

class Promise { constructor (executor){ //默认状态是等待状态 this.status = ‘panding’; this.value = undefined; this.reason = undefined; //存放成功的回调 this.onResolvedCallbacks = []; //存放失败的回调 this.onRejectedCallbacks = []; let resolve = (data) => { if(this.status === ‘pending’){ this.value = data; this.status = “resolved”; this.onResolvedCallbacks.forEach(fn => fn()); } } let reject = (reason) => { if(this.status === ‘pending’){ this.reason = reason; this.status = ‘rejected’; this.onRejectedCallbacks.forEach(fn => fn()); } } try{ //执行时可能会发生异常 executor(resolve,reject); }catch (e){ reject(e); //promise失败了 }

}
then(onFuiFilled,onRejected){ 
    //防止值得穿透 
    onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
    onRejected = typeof onRejected === 'function' ? onRejected :err => {throw err;}        
    let promise2;//作为下一次then方法的promise
    if(this.status === 'resolved'){
       promise2 = new Promise((resolve,reject) => {
           setTimeout(() => {
              try{
                    //成功的逻辑 失败的逻辑
                    let x = onFuiFilled(this.value);
                    //看x是不是promise 如果是promise取他的结果 作为promise2成功的的结果
                    //如果返回一个普通值，作为promise2成功的结果
                    //resolvePromise可以解析x和promise2之间的关系
                    //在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。
                    resolvePromise(promise2,x,resolve,reject)
              }catch(e){
                    reject(e);
              } 
           },0)
       }); 
       } 
   if(this.status === 'rejected'){
        promise2 = new Promise((resolve,reject) => {
            setTimeout(() => {
                try{
                    let x = onRejected(this.reason);
                    //在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。
                    resolvePromise(promise2,x,resolve,reject)
                }catch(e){
                    reject(e);
                }
            },0)
        });
   }
   //当前既没有完成也没有失败
   if(this.status === 'pending'){
       promise2 = new Promise((resolve,reject) => {
           //把成功的函数一个个存放到成功回调函数数组中
            this.onResolvedCallbacks.push( () =>{
                setTimeout(() => {
                    try{
                        let x = onFuiFilled(this.value);
                        resolvePromise(promise2,x,resolve,reject);
                    }catch(e){
                        reject(e);
                    }
                },0)
            });
            //把失败的函数一个个存放到失败回调函数数组中
            this.onRejectedCallbacks.push( ()=>{
                setTimeout(() => {
                    try{
                        let x = onRejected(this.reason);
                        resolvePromise(promise2,x,resolve,reject)
                    }catch(e){
                        reject(e)
                    }
                },0)
            })
       })
   }
   return promise2;//调用then后返回一个新的promise
}
catch (onRejected) {
    // catch 方法就是then方法没有成功的简写
    return this.then(null, onRejected);
}

} Promise.all = function (promises) { //promises是一个promise的数组 return new Promise(function (resolve, reject) { let arr = []; //arr是最终返回值的结果 let i = 0; // 表示成功了多少次 function processData(index, data) { arr[index] = data; if (++i === promises.length) { resolve(arr); } } for (let i = 0; i < promises.length; i++) { promises[i].then(function (data) { processData(i, data) }, reject) } }) } // 只要有一个promise成功了就算成功。如果第一个失败了就失败了 Promise.race = function (promises) { return new Promise((resolve, reject) => { for (var i = 0; i < promises.length; i++) { promises[i].then(resolve,reject) } }) } // 生成一个成功的promise Promise.resolve = function(value){ return new Promise((resolve,reject) => resolve(value); } // 生成一个失败的promise Promise.reject = function(reason){ return new Promise((resolve,reject) => reject(reason)); } Promise.defer = Promise.deferred = function () { let dfd = {}; dfd.promise = new Promise( (resolve, reject) => { dfd.resolve = resolve; dfd.reject = reject; }); return dfd } module.exports = Promise;

```

Promise

一、基本概念

1-1 什么是Promise？

1-2 Promise三种状态

1-3 Promise作用

二、Promise使用