Promise 的手写及自定义封装

Bertha 。 2022-08-29 00:28 157阅读 0赞

#### 一、promise 的手写及自定义封装 ####

1.  `promise` 的自定义封装，`then` 和 `catch` 方法，代码如下所示：

1.  `promise` 的自定义封装，`resolve` 和 `reject` 方法，代码如下所示：

// 声明构造函数
    function Promise (executor) { 
      // 添加属性
      this.PromiseState = 'pending';
      this.PromiseResult = null;
      // 声明属性
      // this.callback = {};
      this.callbacks = [];
      // 保存实例对象的 this 值
      const self = this;
    
      // resolve 函数
      function resolve (data) { 
        // 判断状态
        if (self.PromiseState !== 'pending') return;
        // 1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';
        // 2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        // 调用成功的回调函数
        // if (self.callback.onResolved) { 
        // self.callback.onResolved(data);
        // }
        self.callbacks.forEach(item => { 
          item.onResolved(data);
        });
      }
    
      // reject 函数
      function reject (data) { 
        // 判断状态
        if (self.PromiseState !== 'pending') return;
        // 1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';
        // 2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        // 执行失败回调函数
        // if (self.callback.onRejected) { 
        // self.callback.onRejected(data);
        // }
        self.callbacks.forEach(item => { 
          item.onRejected(data);
        });
      }
    
      try { 
        // 同步调用执行器函数
        executor(resolve, reject);
      } catch (e) { 
        // 修改 promise 对象状态为失败
        reject(e);
      }
    
      // 同步调用执行器函数
      // executor(resolve, reject);
    }
    
    // 添加 then 方法
    Promise.prototype.then = function (onResolved, onRejected) { 
      const self = this;
      // 判断回调函数参数
      if (typeof onRejected !== 'function') { 
        onRejected = reason => { 
          throw reason;
        }
      }
    
      if (typeof onResolved !== 'function') { 
        onResolved = value => value;
        // value => { return value};
      }
    
    
      return new Promise((resolve, reject) => { 
        // 封装函数
        function callback(type) { 
          try { 
              // 获取回调函数的执行结果
              let result = onResolved(this.PromiseResult);
              // 判断
              if (result instanceof Promise) { 
                // 如果是 Promise 类型的对象
                result.then(v => { 
                  resolve(v);
                }, r => { 
                  reject(r);
                });
              } else { 
                // 结果的对象状态为成功
                resolve(result);
              }
            } catch (e) { 
              reject(e);
            }
          }
    
          // 调用回调函数 PromiseState
          if (this.PromiseState === 'fulfilled') { 
            callback(onResolved);
          }
    
          if (this.PromiseState === 'rejected') { 
            callback(onRejected);
          }
    
          // 判断 pending 状态
          if (this.PromiseState === 'pending') { 
            // 保存回调函数
            this.callbacks.push({ 
              onResolved: function() { 
                callback(onResolved);
              },
              onRejected: function() { 
                callback(onRejected);
              }
            });
          }
        });
      
    }
    
    
    // 添加 catch 方法
    Promise.prototype.catch = function (onRejected) { 
      return this.then(undefined, onRejected);
    };
    
    // 添加 resolve 方法
    Promise.resolve = function (value) { 
      // 返回 promise 对象
      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);
      });
    }

1.  `promise` 的自定义封装，`all` 和 `race` 方法，代码如下所示：

1.  `promise` 的自定义封装，`class` 形式封装，代码如下所示：

class Promise { 
      // 构造方法
      constructor(executor) { 
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        // 声明属性
        // this.callback = {};
        this.callbacks = [];
        // 保存实例对象的 this 值
        const self = this;
    
        // resolve 函数
        function resolve (data) { 
          // 判断状态
          if (self.PromiseState !== 'pending') return;
          // 1. 修改对象的状态 (promiseState)
          self.PromiseState = 'fulfilled';
          // 2. 设置对象结果值 (promiseResult)
          self.PromiseResult = data;
          // 调用成功的回调函数
          // if (self.callback.onResolved) { 
          // self.callback.onResolved(data);
          // }
          setTimeout(() => { 
            self.callbacks.forEach(item => { 
              item.onResolved(data);
            });
          });
        }
    
        // reject 函数
        function reject (data) { 
          // 判断状态
          if (self.PromiseState !== 'pending') return;
          // 1. 修改对象的状态 (promiseState)
          self.PromiseState = 'rejected';
          // 2. 设置对象结果值 (promiseResult)
          self.PromiseResult = data;
          // 执行失败回调函数
          // if (self.callback.onRejected) { 
          // self.callback.onRejected(data);
          // }
          setTimeout(() => { 
            self.callbacks.forEach(item => { 
              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;
          // value => { return value};
        }
    
        return new Promise((resolve, reject) => { 
          // 封装函数
          function callback(type) { 
            try { 
                // 获取回调函数的执行结果
                let result = onResolved(this.PromiseResult);
                // 判断
                if (result instanceof Promise) { 
                  // 如果是 Promise 类型的对象
                  result.then(v => { 
                    resolve(v);
                  }, r => { 
                    reject(r);
                  });
                } else { 
                  // 结果的对象状态为成功
                  resolve(result);
                }
              } catch (e) { 
                reject(e);
              }
            }
    
            // 调用回调函数 PromiseState
            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(promises) { 
        // 返回结果为promise对象
        return new Promise((resolve, reject) => { 
          // 声明变量
          let count = 0;
          let arr = [];
          // 遍历
          for(let i=0;i<promises.length;i++) { 
            promises[i].then(v => { 
              // 得知对象的状态是成功
              // 每个promise对象 都成功
              count++;
              // 将当前promise对象成功的结果 存入到数组中 
              arr[i] = v;
              // 判断
              if (count === promises.length) { 
                // 修改状态
                resolve(arr);
              }
            }, r => { 
              reject(r);
            });
          }
        });
      }
    
    
      // 添加 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);
            });
          }
        });
      }
    }