1. promise基础

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

描述

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
一个 Promise 必然处于以下几种状态之一： :::warning

  • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 ::: :::success

  • 已兑现（fulfilled）: 意味着操作成功完成。 ::: :::danger

  • 已拒绝（rejected）: 意味着操作失败。 :::

待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是 promise， 所以它们可以被链式调用。
image.png

2. Promise异步的处理

定义Promise中的使用到的各个类型

  1. type ResolveType = (resolve: any) => any;
  2. type RejectType = (resolve: any) => any;
  4. type Executor = (reoslve: ResolveType, reject: RejectType) => any;
  6. export { ResolveType, RejectType, Executor };

1. 单异步 + 级联then

采用发布订阅模式可以实现单异步+级联then的功能

  1. import { ResolveType, RejectType, Executor } from "./actionType";
  3. export default class Promise<T = any> {
  4.   public resolve!: ResolveType;
  5.   public reject!: RejectType;
  6.   public status: string;
  7.   public resolve_executor_value: any;
  8.   public reject_executor_value: any;
  9.   // 保存成功状态要执行的函数
  10.   public resolve_then_callbacks: (() => void)[] = [];
  11.   // 保存失败状态要执行的函数
  12.   public reject_then_callbacks: (() => void)[] = [];
  13.   constructor(executor: Executor) {
  14.     this.status = "pending"; //状态值
  16.     // 成功
  17.     this.resolve = (value: any) => {
  18.       if (this.status === "pending") {
  19.         console.log("进入到resolve方法");
  20.         this.status = "success";
  21.         this.resolve_executor_value = value;
  22.         this.resolve_then_callbacks.forEach((callback) => callback());
  23.       }
  24.     };
  26.     // 失败
  27.     this.reject = (reason: any) => {
  28.       if (this.status === "pending") {
  29.         console.log("进入到reject方法");
  30.         this.status = "reject";
  31.         this.reject_executor_value = reason;
  32.         this.reject_then_callbacks.forEach((callback) => callback());
  33.       }
  34.     };
  36.     try {
  37.       // 执行函数
  38.       executor(this.resolve, this.reject);
  39.     } catch (err) {
  40.       this.status = "pending";
  41.       // 失败则直接执行reject函数
  42.       this.reject((err as any).toString());
  43.       throw new Error("程序停止...");
  44.     }
  45.   }
  47.   then(resolveInthen: ResolveType, rejectInThen: RejectType) {
  48.     console.log("进入then方法");
  49.     return new Promise((resolve, reject) => {
  50.       let result;
  51.       // 这里的this代表外部的Promise对象
  52.       if (this.status === "success") {
  53.         result = resolveInthen(this.resolve_executor_value); //ok
  54.         resolve(result);
  55.       }
  57.       if (this.status === "reject") {
  58.         result = rejectInThen(this.reject_executor_value);
  59.         reject(result);
  60.       }
  62.       //生产者
  63.       if (this.status === "pending") {
  64.         console.log("进入到then方法的pending块");
  65.         this.resolve_then_callbacks.push(() => {
  66.           result = resolveInthen(this.resolve_executor_value);
  67.           resolve(result);
  68.         });
  69.         this.reject_then_callbacks.push(() => {
  70.           result = rejectInThen(this.reject_executor_value);
  71.           reject(result);
  72.         });
  73.       }
  74.     });
  75.   }
  76. }
  78. export {};

测试函数

  1. import Promise from "./Promise";
  3. //
  4. let promise = new Promise((resolve, reject) => {
  5.   // 模拟宏任务异步执行过程
  6.   setTimeout(() => {
  7.     resolve("成功了");
  8.   }, 1000);
  9. });
  11. promise
  12.   .then(
  13.     (resolveData1) => {
  14.       return console.log("第一个then成功了:", resolveData1), "ok";
  15.     },
  16.     (rejectData1) => {
  17.       return console.log("第一个then失败了:", rejectData1), "fail1";
  18.     }
  19.   )
  20.   .then(
  21.     (resolveData1) => {
  22.       return console.log("第二个then成功了:", resolveData1), "ok";
  23.     },
  24.     (rejectData1) => {
  25.       return console.log("第二个then失败了:", rejectData1), "fail1";
  26.     }
  27.   );
  29. console.log("<----同步代码结束---->");
  30. export {};

2. 多异步+级联

如果then返回的是新的promise，涉及到多级异步，实现方法如下：

  1. import { ResolveType, RejectType, Executor } from "./actionType";
  3. export default class MyPromise<T = any> {
  4.   public resolve!: ResolveType;
  5.   public reject!: RejectType;
  6.   public status: string;
  7.   public resolve_executor_value: any;
  8.   public reject_executor_value: any;
  9.   // 保存成功状态要执行的函数
  10.   public resolve_then_callbacks: (() => void)[] = [];
  11.   // 保存失败状态要执行的函数
  12.   public reject_then_callbacks: (() => void)[] = [];
  13.   constructor(executor: Executor) {
  14.     this.status = "pending"; //状态值
  16.     // 成功
  17.     this.resolve = (value: any) => {
  18.       if (this.status === "pending") {
  19.         this.status = "success";
  20.         this.resolve_executor_value = value;
  21.         this.resolve_then_callbacks.forEach((callback) => callback());
  22.       }
  23.     };
  24.     // 失败
  25.     this.reject = (reason: any) => {
  26.       if (this.status === "pending") {
  27.         this.status = "reject";
  28.         this.reject_executor_value = reason;
  29.         this.reject_then_callbacks.forEach((callback) => callback());
  30.       }
  31.     };
  32.     try {
  33.       // 执行函数
  34.       executor(this.resolve, this.reject);
  35.     } catch (err) {
  36.       //console.log(err.toString())
  37.       this.status = "pending";
  38.       // 失败则直接执行reject函数
  39.       this.reject(err);
  40.       throw new Error("程序停止...");
  41.     }
  42.   }
  44.   then(resolveInthen: ResolveType, rejectInThen: RejectType) {
  45.     console.log("进入then方法");
  46.     return new MyPromise((resolve, reject) => {
  47.       let result: any;
  48.       if (this.status === "success") {
  49.         result = resolveInthen(this.resolve_executor_value); //ok
  50.         resolve(result);
  51.       }
  53.       if (this.status === "reject") {
  54.         result = rejectInThen(this.reject_executor_value);
  55.         reject(result);
  56.       }
  57.       if (this.status === "pending") {
  58.         console.log("进入到then方法的pending块");
  59.         this.processManyAsyncAndSync(resolveInthen, rejectInThen, resolve, reject);
  60.       }
  61.     });
  62.   }
  64.   /**
  65.    * 执行多个异步+多级then的处理方法
  66.    * @param resolveInthen
  67.    * @param rejectInThen
  68.    * @param resolve
  69.    * @param reject
  70.    */
  71.   processManyAsyncAndSync(
  72.     resolveInthen: ResolveType,
  73.     rejectInThen: RejectType,
  74.     resolve: ResolveType,
  75.     reject: RejectType
  76.   ) {
  77.     let result: any;
  78.     this.resolve_then_callbacks.push(async () => {
  79.       result = await resolveInthen(this.resolve_executor_value);
  80.       if (isPromise(result)) {
  81.         // 是异步的Promise对象
  82.         result.then(
  83.           (resolveSuccess) => {
  84.             resolve(resolveSuccess);
  85.           },
  86.           (rejectSucess) => {
  87.             reject(rejectSucess);
  88.           }
  89.         );
  90.       } else {
  91.         resolve(result); // 如果是普通的数据,不是异步的Promise对象
  92.       }
  93.     });
  94.     this.reject_then_callbacks.push(() => {
  95.       result = rejectInThen(this.reject_executor_value);
  96.       reject(result);
  97.     });
  98.   }
  99. }
  101. function isPromise(val: any): val is Promise<any> {
  102.   return isObject(val) && isFunction(val.then);
  103. }
  105. function isObject(val: any): val is Record<any, any> {
  106.   return val !== null && typeof val === "object";
  107. }
  109. function isFunction(data: any): data is Function {
  110.   return typeof data === "function";
  111. }
  113. export {};

这里的processManyAsyncAndSync利用async&await实现了异步，是一种不常见的处理方法。此外，还有另外一种比较常见的处理方法，使用then方法处理：

  1. processManyAsyncAndSync(
  2.   resolveInthen: ResolveType,
  3.   rejectInThen: RejectType,
  4.   resolve: ResolveType,
  5.   reject: RejectType
  6. ) {
  7.   let result: any;
  8.   this.resolve_then_callbacks.push(async () => {
  9.     result = await resolveInthen(this.resolve_executor_value);
  10.     if (isPromise(result)) {
  11.       // 是异步的Promise对象
  12.       result.then(
  13.         (result) => {
  14.           resolve(result);
  15.         },
  16.         (reason) => reject(reason)
  17.       );
  18.     } else {
  19.       resolve(result); // 如果是普通的数据,不是异步的Promise对象
  20.     }
  21.   });
  22.   this.reject_then_callbacks.push(() => {
  23.     result = rejectInThen(this.reject_executor_value);
  24.     reject(result);
  25.   });
  26. }

测试如下：

  1. import Promise from "./Promise";
  3. //
  4. let promise = new Promise((resolve, reject) => {
  5.   // 模拟宏任务异步执行过程
  6.   setTimeout(() => {
  7.     resolve("成功了");
  8.   }, 1000);
  9. });
  11. promise
  12.   .then(
  13.     (resolveData1) => {
  14.       console.log("第一个then成功了:", resolveData1);
  15.       return new Promise((resolve, reject) => {
  16.         setTimeout(() => {
  17.           resolve("第二个异步操作");
  18.         }, 1000);
  19.       });
  20.     },
  21.     (rejectData1) => {
  22.       return console.log("第一个then失败了:", rejectData1), "fail1";
  23.     }
  24.   )
  25.   .then(
  26.     (resolveData1) => {
  27.       return console.log("第二个then成功了:", resolveData1), "ok";
  28.     },
  29.     (rejectData1) => {
  30.       return console.log("第二个then失败了:", rejectData1), "fail1";
  31.     }
  32.   );
  34. console.log("<----同步代码结束---->");
  35. export {};

3. Promise.all()

  1. class Promise<T = any>{
  3.   ...
  5.   static all(promises: Promise[]): Promise {
  6.     return new Promise((resolve, reject) => {
  7.       let allPromiseResults: Array<any> = [];
  8.       let executorIndex = 0;
  9.       promises.forEach((promise, index) => {
  10.         promise.then(
  11.           (result) => {
  12.             ProcessData(result, index);
  13.           },
  14.           (reason) => {
  15.             reject(reason);
  16.             return;
  17.           }
  18.         );
  19.       });
  20.       function ProcessData(result: any, index: number) {
  21.         allPromiseResults[index] = result;
  22.         executorIndex++;
  23.         if (executorIndex === promises.length) {
  24.           resolve(allPromiseResults);
  25.         }
  26.       }
  27.     });
  28. }