1. Promise源码分析

1. Promise三种状态

pending(进行中)、fulfilled(已成功)、rejected(已失败)

2. new Promise()对象参数

是一个回调函数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回
调reject;

  1. resolve的参数除了正常值以外， 还可能是一个Promise对象的实例;
  2. reject的参数通常是一个Error对象的实例;

3. then()方法

返回一个新的Promise实例.
接收两个参数:

  1. onResolved(fulfilled状态的回调);
  2. onRejected(rejected状态的回调，该参数可选)

4.catch()方法

返回一个新的promise对象

5. finally()方法

finally方法不管Promise状态如何都会执行，该方法的回调函数不接受任何参数

6. Promise.all()方法

  1. 将多个Promise实例，包装成一个新的Promise实例
  • 入参: 由Promise对象组
    成的数组作为参数(Promise.all()方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是
    Promise实例)
  • 注意: 参数中只要有一个实例触发catch方法，都会触发Promise.all()方法返回的新的实例的catch方法

7. Promise.race()方法

  • 入参: 参数与Promise.all方法一样
  • 执行说明: 参数中的实例只要有一个率先改变状态就会将该实例的状态传给Promise.race()方法，并将返回值作为Promise.race()方法产生的Promise实例的返回值

8. Promise.resolve()方法

将现有对象转为Promise对象

  • 如果该方法的参数为一个Promise对象，Promise.resolve()将不做任何处理;
  • 如果参数thenable对象(即具有then方法)，Promise.resolve()将该对象转为Promise对象并立即执行then方法;
  • 如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为fulfilled，其参数将会作为then方法中onResolved回调函数的参数.
  • 如果Promise.resolve方法不带参数，会直接返回一个fulfilled状态的 Promise 对象。
  • 需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”(event loop)的结束时执行，而不是在下一轮“事
    件循环”的开始时。

9. Promise.reject()方法

同样返回一个新的Promise对象，状态为rejected，无论传入任何参数都将作为reject()的参数

2. Promise代码实现

  1. // 初始状态
  2. const PENDING = "pending";
  3. // 完成状态
  4. const FULFILLED = "fulfilled";
  5. // 失败状态
  6. const REJECTED = "rejected";
  8. // 异步执行方法封装
  9. function asyncExecFun(fn) {
  10.   setTimeout(() => fn(), 0);
  11. }
  13. // 执行promise resolve功能
  14. function resolvePromise(promise, res, resolve, reject) {
  15.   // 返回同一个promise
  16.   if (promise === res) {
  17.     reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
  18.     return;
  19.   }
  20.   // promise结果
  21.   if (res instanceof MyPromise) {
  22.     res.then(resolve, reject);
  23.   } else {
  24.     // 非promise结果
  25.     resolve(res);
  26.   }
  27. }
  29. class MyPromise {
  30.   status = PENDING;
  31.   value = undefined;
  32.   reason = undefined;
  33.   successCallbacks = [];
  34.   failCallbacks = [];
  35.   constructor(exector) {
  36.     // 立即执行传入参数
  37.     // 参数直接写为 this.resolve  会导致函数内 this指向会发生改变
  38.     // 异步执行状态变更
  39.     // 捕获执行器的异常
  40.     try {
  41.         exector(
  42.           (value) => asyncExecFun(() => this.resolve(value)),
  43.           (reason) => asyncExecFun(() => this.reject(reason))
  44.         );
  45.     } catch (e) {
  46.         this.reject(e)
  47.     }
  48.   }
  50.   resolve(value) {
  51.     // 如果状态已经变更则直接返回
  52.     if (this.status !== PENDING) return;
  53.     this.value = value;
  54.     this.status = FULFILLED;
  55.     // 执行所有成功回调
  56.     while (this.successCallbacks.length) this.successCallbacks.shift()();
  57.   }
  59.   reject(reason) {
  60.     // 如果状态已经变更则直接返回
  61.     if (this.status !== PENDING) return;
  62.     this.reason = reason;
  63.     this.status = REJECTED;
  64.     if(!this.failCallbacks.length){
  65.         throw '(in MyPromise)'
  66.     }
  67.     // 执行所有失败回调
  68.     while (this.failCallbacks.length) this.failCallbacks.shift()();
  69.   }
  70.   then(successCallback, failCallback) {
  71.     // 成功函数处理 忽略函数之外的其他值
  72.     successCallback =
  73.       typeof successCallback == "function" ? successCallback : (v) => v;
  74.     // 失败函数处理 忽略函数之外的其他值 抛出异常  实现catch冒泡的关键
  75.     failCallback =
  76.       typeof failCallback == "function"
  77.         ? failCallback
  78.         : (reason) => {
  79.             throw reason;
  80.           };
  82.     let promise = new MyPromise((resolve, reject) => {
  83.       // 统一异常处理逻辑
  84.       const execFun = (fn, val) => {
  85.         try {
  86.           let res = fn(val);
  87.           resolvePromise(promise, res, resolve, reject);
  88.         } catch (e) {
  89.           reject(e);
  90.         }
  91.       };
  92.       // 执行成功回调
  93.       const execSuccessCallback = () => execFun(successCallback, this.value);
  94.       // 执行失败回调
  95.       const execFailCallback = () => execFun(failCallback, this.reason);
  96.       // 同步将对应成功或者失败回调事件加入对应回调队列
  97.       if (this.status === PENDING) {
  98.         // 将成功回调加入队列
  99.         this.successCallbacks.push(execSuccessCallback);
  100.         // 讲失败回调加入队列
  101.         this.failCallbacks.push(execFailCallback);
  102.         return;
  103.       }
  104.       // 延迟执行 可以将函数执行结果和当前then 返回的promise 进行比较
  105.       asyncExecFun(() => {
  106.         // 如果已经 fulfilled 可直接调用成功回调方法
  107.         if (this.status === FULFILLED) {
  108.           execSuccessCallback();
  109.           // 如果已经 rejected 可直接调用失败回调方法
  110.         } else if (this.status === REJECTED) {
  111.           execFailCallback();
  112.         }
  113.       });
  114.     });
  115.     return promise;
  116.   }
  118.   catch(failCallback) {
  119.     return this.then(undefined, failCallback);
  120.   }
  122.   finally(callback) {
  123.     return this.then(
  124.       // 穿透正常值
  125.       (value) => MyPromise.resolve(callback()).then(() => value),
  126.       (reason) =>
  127.         MyPromise.resolve(callback()).then(() => {
  128.           // 穿透异常信息
  129.           throw reason;
  130.         })
  131.     );
  132.   }
  134.   static resolve(value) {
  135.     // 如果是MyPromise 实例 则直接返回
  136.     if (value instanceof MyPromise) return value;
  137.     // 如果是MyPromise 实例 否则返回一个 MyPromise实例
  138.     return new MyPromise((resolve) => resolve(value));
  139.   }
  140.   static reject(reason) {
  141.     // 如果是MyPromise 实例 则直接返回
  142.     if (reason instanceof MyPromise) return reason;
  143.     // 如果是MyPromise 实例 否则返回一个 MyPromise实例
  144.     return new MyPromise((resolve, reject) => reject(reason));
  145.   }
  147.   // all方法
  148.   static all(array) {
  149.     // 存储结果
  150.     let result = [];
  151.     // 存储数组长度
  152.     let len = array.length;
  153.     // 创建返回MyPromise
  154.     let promise = new MyPromise((resolve, reject) => {
  155.       // 定义当前MyPromise的索引
  156.       let index = 0;
  157.       // 添加数据的公用方法
  158.       function addData(key, data) {
  159.         // 赋值
  160.         result[key] = data;
  161.         // 索引递增
  162.         index++;
  163.         // 全部执行完则resolve
  164.         if (index == len) {
  165.           resolve(result);
  166.         }
  167.       }
  168.       // 按顺序变量数组
  169.       for (let i = 0; i < len; i++) {
  170.         let curr = array[i];
  171.         // 如果是MyPromise则 按其规则处理
  172.         if (curr instanceof MyPromise) {
  173.           curr.then((value) => addData(i, value), reject);
  174.         } else {
  175.           // 非MyPromise直接赋值
  176.           addData(i, curr);
  177.         }
  178.       }
  179.     });
  180.     // 返回新的MyPromise实例
  181.     return promise;
  182.   }
  183.   // 只要有一个成功或者失败就返回
  184.   static race(array) {
  185.     let promise = new MyPromise((resolve, reject) => {
  186.       for (let i = 0; i < array.length; i++) {
  187.         let curr = array[i];
  188.         // MyPromise实例 结果处理
  189.         if (curr instanceof MyPromise) {
  190.           curr.then(resolve, reject);
  191.         } else {
  192.           // 非MyPromise实例处理
  193.           resolve(curr);
  194.         }
  195.       }
  196.     });
  197.     return promise;
  198.   }
  199. }
  201. module.exports = MyPromise;

3. Promise优缺点

1. Promise优点

  1. 统一异步API: 逐渐被用作浏览器的异步API, 统一现在各种各样的API
  2. Promise与事件对比: ?
  3. Promise与回调对比: 解决了回调地狱的问题, 将异步操作与同步操作的流程表达处理

  4. Promise可以链式调用, 更好的错误处理方式(包含了异常处理)

    2. Promise缺点

  5. 无法取消Promise, 一单建立就会立即执行, 无法中途取消.

  6. 如果不设置回调函数, Promise内部抛出的错误不会反应到外部.
  7. 当处于pending状态的时候,无法知道目前进展到哪一个阶段(刚开始还是即将完成).