Promise

一、什么是Promise?

是ES6出来的一种新的语法，用来解决异步问题，防止回调地狱问题的，本身是个构造函数。。。。。。

二、Promise常用API

//API
*1.Promise构造函数：promise(excutor){}
(1)executor函数：执行器（resolve,reject）=>{}
(2)resolve函数： 内部成功时我们调用的函数value=>{}
(3)reject函数：  内部失败时我们调用的函数reason=>{}
#executor会在Promise内部立即同步调用，异步操作在执行器中执行。

2.Promise.prototype.then方法（onResolve,onReject）
(1)onResolve函数：成功的回调函数（value）=>{}
(2)onReject函数： 失败的回调函数 （reason）=>{}
#返回的是一个新的Promise对象

3.Promise.prototype.catch方法：(onRejected)=>{}
(1)onRejected函数：失败的回调函数(reason)=>{}

4.Promise.resolve():返回一个成功的Promise对象
5.Promise.reject() :返回一个失败的Promise对象
6.promise.all()    :参数为一个Promise数组，只有当全部成功返回时，返回的结果为一个数组。当有一个失败的 时候，返回的结果为失败那个Promise的错误返回值。
7.Promise.race()   :返回一个新的Promise，且第一个完成的Promise结果状态就是最终的结果状态。

*2.修改Promise状态
（1）resolve()=>resolved/fulfilled
 (2)reject ()=>rejected
 (3)throw 

*3.Promise链式调用
*4.中断Promise链
（1）返回一个Pendding状态的Promise://return new promise(()=>{})

三、实现Promise（构造函数）

function Promise(executor) {
  //为构造函数添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;
  //锁定this指向
  const self = this;

  //回调函数
  this.callbacks = [];

  //resolve函数
  function resolve(data) {
    if (self.PromiseState !== "pending") return;
    self.PromiseState = "fulfilled";
    self.PromiseResult = data;

    //异步任务处理,增加链式调用
    setTimeout(() => {
      self.callbacks.forEach((item) => {
        item.onResolved(data);
      });
    });
  }

  //reject函数
  function reject(data) {
    if (self.PromiseState !== "pending") return;
    self.PromiseState = "rejected";
    self.PromiseResult = data;

    //异步任务处理,增加链式调用
    setTimeout(() => {
      self.callbacks.forEach((item) => {
        item.onRejected(data);
      });
    });
  }

  try {
    //excutor执行器函数在Promise内部是同步调用的
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}

//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
  const self = this;

  //在处理。then().then(v=>{})等异常穿透问题时，为函数添加默认值
  if (typeof onResolved !== "function") {
    onResolved = (v) => v;
  }
  if (typeof onRejected !== "function") {
    onRejected = (v) => {
      throw v;
    };
  }

  return new Promise((resolve, reject) => {
    //封装函数
    function callback(type) {
      try {
        let result = type(self.PromiseResult);

        if (result instanceof Promise) {
          result.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          );
        } else {
          resolve(result);
        }
      } catch (e) {
        reject(e);
      }
    }

    //成功的回调
    if (this.PromiseState === "fulfilled") {
      setTimeout(() => {
        callback(onResolved);
      });
    }

    //失败的回调
    if (this.PromiseState === "rejected") {
      setTimeout(() => {
        callback(onRejected);
      });
    }

    //异步处理
    if (this.PromiseState === "pending") {
      this.callbacks.push({
        onResolved: function () {
          callback(onResolved);
        },
        onRejected: function () {
          callback(onRejected);
        },
      });
    }
  });
};

//添加cathc方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

//添加resolve方法
Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      value.then(
        (v) => {
          resolve(v);
        },
        (r) => {
          reject(r);
        }
      );
    } else {
      resolve(value);
    }
  });
};

//添加reject方法
Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason);
  });
};

//添加all方法
Promise.all = function (promises) {
  //定义计数器，判断是否全部成功
  let count = 0;
  //定义返回数组
  let arr = [];
  //返回Promise对象
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (value) => {
          count++;
          arr[i] = value;
          if (count === promises.length) {
            resolve(arr);
          }
        },
        (reason) => {
          reject(reason);
        }
      );
    }
  });
};

//添加race方法
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          resolve(v);
        },
        (r) => {
          reject(r);
        }
      );
    }
  });
};

四、Promise实现（构造函数版本）

class Promise {
  constructor(executor) {
    //为构造函数添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    //锁定this指向
    const self = this;

    //回调函数
    this.callbacks = [];

    //resolve函数
    function resolve(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "fulfilled";
      self.PromiseResult = data;

      //异步任务处理,增加链式调用
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onResolved(data);
        });
      });
    }

    //reject函数
    function reject(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "rejected";
      self.PromiseResult = data;

      //异步任务处理,增加链式调用
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onRejected(data);
        });
      });
    }

    try {
      //excutor执行器函数在Promise内部是同步调用的
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  //添加then方法
  then(onResolved, onRejected) {
    const self = this;

    //在处理。then().then(v=>{})等异常穿透问题时，为函数添加默认值
    if (typeof onResolved !== "function") {
      onResolved = (v) => v;
    }
    if (typeof onRejected !== "function") {
      onRejected = (v) => {
        throw v;
      };
    }

    return new Promise((resolve, reject) => {
      //封装函数
      function callback(type) {
        try {
          let result = type(self.PromiseResult);

          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }

      //成功的回调
      if (this.PromiseState === "fulfilled") {
        setTimeout(() => {
          callback(onResolved);
        });
      }

      //失败的回调
      if (this.PromiseState === "rejected") {
        setTimeout(() => {
          callback(onRejected);
        });
      }

      //异步处理
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  }
  //添加cathc方法
  catch(onRejected) {
    return this.then(undefined, onRejected);
  }
  //添加resolve方法
  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(
          (v) => {
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      } else {
        resolve(value);
      }
    });
  }
  //添加reject方法
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  }
  //添加all方法
  static all(promises) {
    //定义计数器，判断是否全部成功
    let count = 0;
    //定义返回数组
    let arr = [];
    //返回Promise对象
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (value) => {
            count++;
            arr[i] = value;
            if (count === promises.length) {
              resolve(arr);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      }
    });
  }
  //添加race方法
  static race(promises) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (v) => {
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }
}