23.自定义封装Promise-then方法完善

月亮慢慢圆o

已于 2024-04-07 21:29:05 修改

阅读量139

点赞数 3

分类专栏： Promise 文章标签： java 前端 javascript

于 2024-04-06 20:15:47 首次发布

本文链接：https://blog.csdn.net/yujiabao702/article/details/137436758

版权

Promise 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章讲述了对Promise.prototype.then方法的改进，通过创建动态callback函数，根据不同PromiseState（resolved或rejected）调用相应的回调函数，提高代码灵活性和可维护性。

摘要由CSDN通过智能技术生成

原先的修改 then 返回的代码中,代码是差不多的,所以我们可以复用

原先代码：

  Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
      if (this.PromiseState === "resolved") {
        try {
          let result = onResolved(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "rejected") {
        try {
          let result = onRejected(this.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            try {
              let result = onResolved(self.PromiseResult);
              if (result instanceof Promise) {
                result.then(
                  (v) => {
                    resolve(v);
                  },
                  (r) => {
                    reject(r);
                  }
                );
              } else {
                resolve(result);
              }
            } catch (e) {
              reject(e);
            }
          },
          onRejected: function () {
            try {
              let result = onRejected(self.PromiseResult);
              if (result instanceof Promise) {
                result.then(
                  (v) => {
                    resolve(v);
                  },
                  (r) => {
                    reject(r);
                  }
                );
              } else {
                resolve(result);
              }
            } catch (e) {
              reject(e);
            }
          },
        });
      }
    });
  };

改进以后的：

创建一个 callback 函数,然后把代码放进去,但是因为根据任务是成功还是失败的不同,所以调的函数也不同,这个不能写死

  Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    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 === "resolved") {
        callback(onResolved);
      }
      if (this.PromiseState === "rejected") {
        callback(onRejected);
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  };