Promise详解和手写Promise

定义

• promise：承诺，许诺
• Promise是异步编程的一种实现方案，比起传统的解决方案（回调函数和事件），更合理，更易于维护，解决了异步回调地狱。
• 一个Promise就是一个对象，它代表了一个异步操作最终完成或者失败。
• Promise对象用于异步操作，它表示一个尚未完成且预计未来完成的异步操作。

JavaScript的异步和回调

• 1、JavaScript的执行环境是单线程的。所谓单线程，就是指JavaScript引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完成后才能执行下个任务，它会阻塞其他任务，这个任务可以成为主线程。但实际上还有其他线程（事件触发线程，ajax请求线程）。
• 2、同步模式。既上述所说的单线程模式，一次只能执行一个任务，函数调用后需要等待函数执行结束并且返回结果，才会去执行下一个函数。如果这个任务执行的时间长，则会阻塞下个任务的执行。

var msg = "this is msg"
while(true)
cosnole.log(msg) // 不会执行

• 3、异步模式。既与同步模式相反，可以一起执行多个任务。setTimeout(()=>{},1000)是典型的异步执行任务。

setTimeout(function() {
  console.log('task A');
}, 0);
  console.log('task B');
//先输出taskB 在输出taskA
//因为同步任务先于异步任务执行，哪怕定时器的延时时间是0s

• 4、回调函数。在异步任务完成以后，我们需要获取处理后的结果，通常，我们可以将这个函数先定义，存储在内存中，将其当做参数传入之前的异步操作函数中，等异步操作结束，就会调用执行这个函数，这个函数就叫做回调函数（callback）。

function fn(cb) {
  var a = 'aa'
  setTimeout(() => {
    a = 'change a'
    cb && cb(a)
  }, 1000)
}

fn(function(v){
  console.log(v)
})

• 5、在文件读取，资源请求都是异步的，我们都可以通过回调来获取异步的结果，但这样又会造成函数回调层次太深，造成回调地狱。

const fs = require('fs')
fs.readFile('./a.txt',(data,error)=>{
  if(data){
    fs.readFile('./b.txt',(data,error)=>{
      fs.readFile('./c.txt',(data,error)=>{
        fs.readFile('./d.txt',(data,error)=>{
          fs.readFile('./e.txt',(data,error)=>{
      
          })
        })
      })
    })
  }
})

Promise的基本用法

//许下一个承诺
let flag = true
let  promise = new Promise((resolve,reject)=>{
  if(flag){
    reject('error') //失败的回调
  }else{
    resolve('success')  //成功的回调
  }
})
// 执行这个承诺 .then
promise.then(data=>{
  console.log(data)
}).catch(error=>{
  console.log(error)
}).finally(()=>{
  console.log('finally')
})

Promise.all

Promise的静态方法，该方法接受一个Promise数组，数组内所有的任务同时执行，只有所有的任务执行完毕才将pending转换成fulfilled

let pArr = []
let p1 = new Promise((resolve,reject)=>{

})
pArr.push(p1)
let p2 = new Promise((resolve,reject)=>{

})
pArr.push(p2)
Promise.all(pArr).then(()=>{})

Promsie.race

race也是Promise的静态方法，用法与all()类似，也是接收一个Promise数组，不同点是all()方法是等数组中的所有任务同时执行，且所有任务执行完毕才将状态由pedding转为fulfilled，race()方法是数组中的所有任务同时执行，有一个任务执行完毕时，就将状态由pedding转为fulfilled。

手动实现Promise

简易版

function MPromise() {
  let cb = arguments[0]
  let self = this
  this.msg = ''
  this.status = 'pending'
  cb(
    function() {
      self.status = 'resolve'
      self.msg = arguments[0]
    },
    function() {
      self.status = 'reject'
      self.msg = arguments[0]
    }
  )
}
MPromise.prototype.then = function() {
  if (this.status == 'resolve') {
    arguments[0](this.msg)
  }
  if (this.status == 'reject' && arguments[1]) {
    arguments[1](this.msg)
  }
}
//测试代码
let isFlag = false
let p = new KPromise((resolve, reject) => {
  if (isFlag) {
    resolve('success')
  } else {
    reject('error')
  }
})
p.then(
  data => {
    console.log(data)
  },
  error => {
    console.log(error)
  }
)

完整版

/* ----------------------------------------------------------------------------
 * Promise 完整版
 --------------------------------------------------------------------------- */
 const states = {
  PENDING  : 'pending',
  FULFILLED: 'fulfilled',
  REJECTED : 'rejected'
}

class Promise {
  /**
   * [ 构造函数 ]
   * @param  {[Function]} excurtor [执行函数]
   * @return {[Undefined]} undefined
   */
  constructor (excurtor) {
      let self = this;

      this.status      = states.PENDING; // 当前状态
      this.value       = undefined;      // 成功的内容
      this.reason      = undefined;      // 失败的原因
      this.onFulfilled = [];             // 存储成功回调
      this.onRejected  = [];             // 存储失败回调

      // 成功方法
      function resolve (value) {
          let onFulfilled = self.onFulfilled;

          // 判断状态是否为pending，只有此状态时，才可以发生状态改变
          if (self.status === states.PENDING) {
              self.status = states.FULFILLED;
              self.value = value;

              if (onFulfilled.length) {
                  onFulfilled.forEach(fn => {
                      fn();
                  });
              }
          }
      }

      // 失败方法
      function reject (reason) {
          let onRejected = self.onRejected;

          // 判断状态是否为pending，只有此状态时，才可以发生状态改变
          if (self.status === states.PENDING) {
              self.status = states.REJECTED;
              self.reason = reason;

              if (onRejected.length) {
                  onRejected.forEach(fn => {
                      fn()
                  });
              }
          }
      }

      // 立即调用执行函数，并捕获异常
      try {
          excurtor(resolve, reject);
      } catch (e) {
          reject(e); // 捕获到执行函数异常后，直接执行失败回调
      }
  }

  /**
   * [ 实例方法: then ]
   * @param  {[Function]} onFulfilled [成功回调]
   * @param  {[Function]} onRejected  [失败及异常回调]
   * @return {[Object]}  promise2
   */
  then (onFulfilled, onRejected) {
      // 补全参数，实现往下传递
      onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
      onRejected = typeof onRejected === 'function' ? onRejected : error =>{ throw error };

      let self = this;
      let promise2;

      promise2 = new Promise((resolve, reject) => {
          // 状态已改变为成功时，则立即执行
          if (self.status === states.FULFILLED) {
              setTimeout(() => { // 此定时器确保回调方法在异步中执行的，也方便进行promiseA+规范测试
                  // try catch 用来捕获回调方法中抛出的异常
                  try {
                      let x = onFulfilled(self.value);
                      resolvePromise(promise2, x, resolve, reject);
                  } catch (e) {
                      reject(e);
                  }
              });
          }

          // 状态已改变为失败时，则立即执行
          if (self.status === states.REJECTED) {
              setTimeout(() => { // 同上
                   // 同上
                  try {
                      let x = onRejected(self.reason);
                      resolvePromise(promise2, x, resolve, reject);
                  } catch (e) {
                      reject(e);
                  }
              }, 0);
          }

          // 处理异步情况，先存在起来，等状态改变再执行相应回调
          if (self.status === states.PENDING) {
              self.onFulfilled.push(() => {
                  setTimeout(() => {  // 同上
                       // 同上
                      try {
                          let x = onFulfilled(self.value);
                          resolvePromise(promise2, x, resolve, reject);
                      } catch (e) {
                          reject(e);
                      }
                  }, 0);
              });
              self.onRejected.push(() => {
                  setTimeout(() => {  // 同上
                       // 同上
                      try {
                          let x = onRejected(self.reason);
                          resolvePromise(promise2, x, resolve, reject);
                      } catch (e) {
                          reject(e);
                      }
                  }, 0);
              });
          }
      });

      return promise2;
  }

  /**
   * [ 实例方法：catch ]
   * @param  {[Function]} onRejected [失败及异常回调]
   * @return {[Object]}   promise
   */
  catch (onRejected) {
      return this.then(null, onRejected);
  }

  /**
   * [ 静态方法(由类调用)：all ]
   * @param  {[Array]} promises [由promise组成的数组]
   * @return {[Object]} promise
   */
  static all (promises) {
      let res = [];
      let count = 0;
      let length = promises.length;

      return new Promise((resolve, reject) => {
          promises.forEach((promise, index) => {
              promise.then(
                  value => {
                      res[index] = value;
                      if (++count === length) {
                          resolve(res);
                      }
                  },
                  reject
              );
          });
      });
  }

  /**
   * [ 静态方法(由类调用)race ]
   * @param  {[Array]} promises [由promise组成的数组]
   * @return {[Object]} promise
   */
  static race (promises) {
      return new Promise((resolve, reject) => {
         promises.forEach(promise => {
             promise.then(resolve, reject);
         })
      });
  }
}

function resolvePromise(promise2, x, resolve, reject) {
   // 自己不能等待自己的状态改变
   if (promise2 === x) {
       return reject(new TypeError('循环引用'));
   }

   let called; // 标识位，要么成功，要么失败；
   let typeX = typeof x;

   // 判断x的类型是否为对象或者函数且不为null
   if (x !== null && (typeX === 'object' || typeX === 'function')) {
       try {
           let then = x.then; // 获取then方法； 此处的try用于防止第三方库中获取值会抛错

           if (typeof then === 'function') { // 说明返回的是promise事例
               // 执行then方法，并将this指向x
               then.call(x, y => {
                   if (called) return;
                   called = true;
                   // 如果返回的还是promise, 则将会继续递归调用
                   resolvePromise(promise2, y, resolve, reject);
               }, e => {
                   if (called) return;
                   called = true;
                   reject(e);
               });
           } else { // x为变通对象时，直接成功
               resolve(x);
           }
       } catch (e) {
           if (called) return;
           called = true;
           reject(e);
       }
   } else {
       resolve(x);
   }
}

// 为了方便promiseA+规范测试
Promise.defer = Promise.deferred = function () {
   let dtd = {};
   dtd.promise = new Promise((resolve, reject) => {
       dtd.resolve = resolve;
       dtd.reject = reject;
   });
   return dtd;
};


module.exports = Promise;



// 测试例子 ---------------------------------------------------------------------
let promise = new Promise((resolve, reject) => {
  resolve(1000);
  //reject(100);
});

promise
.then(
  value => {
      console.log('then:', value);
      return new Promise((resolve, reject) => {
          //resolve(199);
          reject('error123');
      });
  },
  reason => console.log(`fail: ${ reason }`)
)
.then(
  value => console.log(value),
  reason => console.log(`fail: ${ reason }`)
);

Promise.all([
   new Promise((resolve, reject) => {
       resolve(1);
   }),
   new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve(2);
       }, 1000);
   }),
   new Promise((resolve, reject) => {
       resolve(3);
       //reject('出错了')
   })
]).then(
   value => console.log(value),
   e => console.log(e)
);