19.自定义封装Promise- 异步任务回调的执行

月亮慢慢圆o

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

阅读量237

点赞数 10

分类专栏： Promise 文章标签： javascript 开发语言 ecmascript

于 2024-04-06 02:34:28 首次发布

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

版权

Promise 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章讲述了如何改进Promise的实现，确保then方法在异步任务的resolve或reject后，且PromiseState变为pending时才执行回调函数。通过添加callback属性并在适当时机调用，解决了then方法在初始pending状态下的调用问题。

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

比如下面这个异步任务,一秒钟以后才会执行 resolve()函数,所以执行 then 方法的时候 PromiseState 还是 pending, 就不会调用 then 方法的两个参数函数

  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("ok");
    });
  }, 1000);
  p.then(
    (value) => {},
    (reason) => {}
  );

所以在 then 方法里还需要调用做一个 PromiseState 为 pending 的判断

  Promise.prototype.then = function (onResolved, onRejected) {
    if (this.PromiseState === "resolved") {
      onResolved(this.PromiseResult);
    }
    if (this.PromiseState === "rejected") {
      onRejected(this.PromiseResult);
    }
    if (this.PromiseState === "pending") {
    }
  };

判断里面执行什么呢,我们要知道,我们需要在什么时候执行 then 方法

其实是在执行完 resolve() 或者 reject() 以后,获取了状态以后才要去执行 then()里面的 onResolved() 或者 onRejected() 函数

所以我们就需要在 Promise 构造函数里面的 resolve() 和 reject() 函数里面添加一个判断,判断此时是异步任务还是同步任务(也就是说此时 then() 里的 onResolved() 或者 onRejected() 函数是否调用)

做这个判断之前,我们给 Promise 构造函数添加一个属性 callback

  function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    this.callback = {};
    function resolve(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "resolved";
      self.PromiseResult = data;
    }
    function reject(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "rejected";
      self.PromiseResult = data;
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }

然后在 then() 方法里面判断状态为 pending 还未改变的时候,给 callback 属性赋值

  Promise.prototype.then = function (onResolved, onRejected) {
    if (this.PromiseState === "resolved") {
      onResolved(this.PromiseResult);
    }
    if (this.PromiseState === "rejected") {
      onRejected(this.PromiseResult);
    }
    if (this.PromiseState === "pending") {
      this.callback = {
        onResolved,
        onRejected,
      };
    }
  };

然后在调用完 resolve() 或者 reject() 函数以后,判断callback属性有没有值，有值说明是异步任务，然后在这里调用callback的方法，用这个 callback 属性里面的 then()方法里的回调函数,并传参

  function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    this.callback = {};
    function resolve(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "resolved";
      self.PromiseResult = data;
      if (self.callback.onResolved) {
        self.callback.onResolved(self.PromiseResult);
      }
    }
    function reject(data) {
      if (self.PromiseState !== "pending") return;
      self.PromiseState = "rejected";
      self.PromiseResult = data;
      if (self.callback.onRejected) {
        self.callback.onRejected(self.PromiseResult);
      }
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }