Promise 常用方法实现

本文实现了以下方法：

• promise.all()
• promise.resolve()
• promise.finally()
• catch()

all 方法实现

promise.all()是用来解决异步并发问题的，允许我们按照异步代码调用的顺序的到异步代码执行的结果，

• 虽然我们p2的计时器只有1秒 p1是两秒，但是我们得到的结果顺序是异步代码调用的顺序
• 只要有一个失败，我们就调用失败中的回调

//实现效果
function p1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("p1");
    }, 2000);
  });
}

function p2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("p2");
    }, 1000);
  });
}

Promise.all(["a", "b", p2(), p1(), "c", "d"]).then(
  (res) => {
    console.log(res); //[ 'a', 'b', 'p2', 'p1', 'c', 'd' ]
  },
  (error) => {  //只要有一个失败就立即执行失败的回调，并停止往下执行
    console.log(error);
  }
);

//自己的promise
 class MyPromise {
   ...... //此处代码可参考上述
   static all(array) {
          let result = []
          let index = 0  
          return new Promise((resolve, reject) => {
              function addData(key, value) {
                result[key] = value
                index++
                if(index == array.length){  //因为可能会有异步操作 所以需要等待
                  resolve(array)
                }
              }
              for (let i = 0; i < array.length; i++) {
                const current = array[i];
                if(x instanceof MyPromise){
                  //如果是Promise
                  current.then(value => addData(i,value ),
                               (reason) => reject(reason)) //如果有一个失败就Promise状态就变为失败
                } else {
                  addData(i,array[i])
                }
              }
          })
      }
 }

复制代码

resolve 方法实现

promose.resolve方法的作用就是将给定的值转换为成功的promise对象 ，也就是resolve方法的返回值就是promise对象

• resolve方法的返回值就是promise对象
• 参数可能是普通值或者promise对象
  • promise对象会在原封不动的在作为resolve方法的返回值
  • 如果是普通值则创建一个promise对象，把普通值传入promise对象

resolve方法演示

function p1() {
  return new Promise((resolve, reject) => {
      resolve("p1");
  });
}

Promise.resolve(10).then((value) => console.log(value)); //10
Promise.resolve(p1()).then((value) => {console.log(value)});  //p1

//自己的promise
 class MyPromise {
   ...... //此处代码可参考上述
   static resolve (value) {
   	 if( x instanceof MyPromise) return value;
     return new Promise(resolve => resolve(value))
   }
 }
MyPromise.resolve(10).then((value) => console.log(value)); //10
MyPromise.resolve(p1()).then((value) => {console.log(value)});  //p1
复制代码

finally 方法实现

promise.finally方法的特点以及实现思路分析

• 接受一个回调函数
• 不管当前Promise对象不管成功还是失败始终都会被执行一次
• 在finally后边可以链式调用then方法来拿到当前promise对象最终的结果,所以需要返回Promsie

//自己的promise
 class MyPromise {
   ...... //此处代码可参考上述
   finally (callback) {
     //由于不管成功还是失败我们都需要调用callback
     //那我们可以在此处调用then 方法获得promise的状态
   	  //不管成功失败都会调用
        return this.then(
          (value) => {
            return MyPromise.resolve(callback()).then(() => value);
          },
          (reason) => {
            return MyPromise.resolve(callback()).then(() => {
              throw reason;
            });
          }
        )
   }
               
 }
复制代码

catch 方法实现

Promise.catch方法的特点以及实现思路分析

• catch方法的作用是用来处理当前promise状态为失败的情况的
• 我们在调用then方法是可以不传递失败的回调函数的，失败就会被catch方法捕获

  function p2() {
      return new Promsise((resolve, reject) => {
        setTimeout(() => {
          resolve("p2");
        }, 1000);
      });
    }

  p2()
    .then((value) => console.log(value))
    .catch((reason) => console.log(reason))
  
//实现也很简单
//自己的promise
 class MyPromise {
   ...... //此处代码可参考上述
	 catch (failCallback){
     //实现也很简单，我们只需要在catch中调用then方法就可以了
   		return this.then(undefined, failCallback)
   }		               
 }
复制代码

至此我们的promise基本的使用方法就全部实现完毕了，下面我贴出完成代码

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {
  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e);
    }
  }
  // promsie 状态 
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在 如果存在 调用
    // this.successCallback && this.successCallback(this.value);
    while(this.successCallback.length) this.successCallback.shift()()
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // 判断失败回调是否存在 如果存在 调用
    // this.failCallback && this.failCallback(this.reason);
    while(this.failCallback.length) this.failCallback.shift()()
  }
  then (successCallback, failCallback) {
    // 参数可选
    successCallback = successCallback ? successCallback : value => value;
    // 参数可选
    failCallback = failCallback ? failCallback: reason => { throw reason };
    let promsie2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      }else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
      }
    });
    return promsie2;
  }
  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value);
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }
  catch (failCallback) {
    return this.then(undefined, failCallback)
  }
  static all (array) {
    let result = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function addData (key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        }else {
          // 普通值
          addData(i, array[i]);
        }
      }
    })
  }
  static resolve (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value));
  }
}

function resolvePromise (promsie2, x, resolve, reject) {
  if (promsie2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason));
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
复制代码