Promise介绍与基本使用：

• Promise是什么

抽象表达：

1）Promise是一门新的技术（ES6规范）

2）Promise是JS中进行异步编程的新解决方案

备注：旧方案是单纯使用回调函数

具体表达：

1）从语法上来说：Promise是一个构造函数

2）从功能上来说：Promise对象 用来封装一个异步操作并可以获取其成功/失败的结果值

• 为什么要使用Promise：

指定回调函数的方式更加灵活

1.旧的：必须在启动异步任务前指定

2.Promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

支持链式调用，可以解决回调地狱问题

Promise初体验：

1.什么是回调地狱？

回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行条件

2.回调地狱的缺点？

不便于阅读

不便于异常处理

3.解决方案？

promise链式调用

promise的状态改变：

• 实例对象中的一个属性：PromiseState

1、pending：未决定的

1、pending变为resolved：成功：fullfilled

2、pending变为rejected：失败

说明：只有这2种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason

promise对象的值

• 实例对象中的另一个属性：PromiseResult

保存着对象【成功/失败】的结果

• resolve
• reject

Promise的基本流程：

Promise API：

1、Promise构造函数：Promise(excutor){}

（1）executor函数：执行器（resolve，reject）=> {}

（2）resolve函数：内部定义成功时我们调用的函数 value=>{}

（3）reject函数：内部定义失败时我们调用的函数reason=>{}

说明：executor会在Promise内部立即同步调用，异步操作在执行器中执行

2、Promise。prototype.then方法：（onResolved，onRejected）=> {}

（1）onResolved函数：成功的回调函数（value）=>{}

（2）onRejected函数：失败的回调函数（reason）=>{}

说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象

3、Promise.prototype.catch方法：（onRejected）=>{}

（1）onRejected函数：失败的回调函数（reason）=>{}

4、Promise.resolve方法：（value）=>{}

（1）value：成功的数据或promise对象

说明：返回一个成功/失败的promise对象

5、Promise.reject方法：（reason）=>{}

说明：返回一个失败的promise对象

6、Promise.all方法：(promise)=>{}

（1）promise：包含n个promise的数组

说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败就直接失败

7、Promise.race方法：（promises）=>{}

（1）promise：包含n个promise的数组

说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

promise的关键问题：

1、如何改变promise的状态？

（1）resolve（value）：pending就会变为resolve

（2）reject（reason）：pending就会变为rejected

（2）抛出异常：throw：pending就会变为rejected

2、一个promise指定多个成功/失败回调函数，都会调用吗？

当promise改变为对应状态时都会调用

3、改变promise状态和指定回调函数谁先谁后？

（1）都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调

（2）如何先改变状态再指定回调？

①在执行器中直接调用resolve()/reject()

②延迟更长时间才调用then()

（3）什么时候才能得到数据？

①如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据

②如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

4、promise.then()返回的新promise的结果状态由什么决定？

（1）简单表达：由then()指定的回调函数执行的结果决定

（2）详细表达：

①如果抛出异常，新promise变为rejected，reason为抛出的异常

②如果返回的是非promise的任意值，新promise变为resolved，value为返回的值

③如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

5、promise如何串联多个操作任务：

（1）promise的then()返回一个新的promise，可以看成then()的链式调用

（2）通过then的链式调用串联多个同步/异步任务

6、promise异常穿透？

（1）当使用promise的then链式调用时，可以在最后指定失败的回调

（2）前面任何操作作出了异常，都会传到最后失败的回调中处理

7、中断promise链？

（1）当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数

（2）办法：在回调函数中返回一个pending状态的promise对象

async与await：

async函数

1、函数的返回值为promise对象

2、promise对象的结果由async函数执行的返回值决定

await表达式：

1、await右侧的表达式一般为promise对象，但也可以是其他的值

2、如果表达式是promise对象，await返回值是promise成功的值

3、如果表达式是其他值，直接将此值作为await的返回值

注意：

1、await必须写在async函数中，但async函数中可以没有await

2、如果await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

Promise自定义封装：

class Promise {
  // 构造方法
  constructor(executor) {
    // 添加属性
    this.PromiseState = "pending";
    this.PromsieResult = null;
    // 声明一个属性
    this.callbacks = [];
    const self = this; //self _this that

    // resolve函数
    function resolve(data) {
      // 判断状态
      if (self.PromiseState !== "pending") return;
      // 1、修改对象的状态(promiseState)
      self.PromiseState = "fulfilled";
      // 2、设置对象结果值(promiseResult)
      self.PromsieResult = data;
      // 调用成功的回调函数
      self.callbacks.forEach((item) => {
        setTimeout(() => {
          item.onResolved(data);
        });
      });
    }
    function reject(data) {
      if (self.PromiseState !== "pending") return;
      // 1、修改对象的状态(promiseState)
      self.PromiseState = "rejected";
      // 2、设置对象结果值(promiseResult)
      self.PromsieResult = data;
      // 调用失败的回调函数
      self.callbacks.forEach((item) => {
        setTimeout(() => {
          item.onRejected(data);
        });
      });
    }
    try {
      // 同步调用[执行器函数]
      executor(resolve, reject);
    } catch (e) {
      // 修改promise对象状态为【失败】
      reject(e);
    }
  }

  // then方法封装
  then(onResolved, onRejected) {
    const self = this;
    // 判断回调的参数
    if (typeof onRejected !== "function") {
      onRejected = (reason) => {
        throw reason;
      };
    }
    if (typeof onResolved !== "function") {
      onResolved = (value) => value;
    }
    return new Promise((resolve, reject) => {
      // 封装函数
      function callback(type) {
        try {
          // 执行成功的回调函数
          let result = type(self.PromsieResult);
          // 判断
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
        // onResolved(this.PromsieResult);
      }
      // 调用回调函数
      if (this.PromiseState === "fulfilled") {
        setTimeout(() => {
          callback(onResolved);
        });
      }
      if (this.PromiseState === "rejected") {
        setTimeout(() => {
          callback(onRejected);
        });
      }
      // 判断pending状态
      if (this.PromiseState == "pending") {
        // 保存回调函数
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  }

  // catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  // resolve方法
  static resolve(value) {
    // 返回Promise对象
    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(promise) {
    // 返回结果为Promise对象
    return new Promise((resolve, reject) => {
      // 声明变量
      let count = 0;
      let arr = [];
      // 遍历
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            // 得知对象的状态是成功的
            // 每个promise对象都成功，才能执行resolve对象
            count++;
            // 将当前promise对象成功的结果，存入到数组中
            arr[i] = v;
            // 判断
            if (count == promise.length) {
              resolve(arr);
            }
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }

  // 添加一个race方法
  static race(promise) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            // 修改返回对象的状态为成功
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }
}