17.自定义封装-resolve 和 reject 代码实现

月亮慢慢圆o

已于 2024-04-07 21:27:38 修改

阅读量250

点赞数 3

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

于 2024-04-06 01:26:53 首次发布

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

版权

Promise 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScriptPromise的构造过程，包括如何使用resolve和reject函数改变对象状态，以及如何处理try...catch中的异常，确保Promise状态只修改一次。

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

1.resolve 函数会修改对象的状态和设置对象结果值,所以首先先去添加对象状态属性和对象结果属性

  function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    function resolve(data) {}
    function reject(data) {}
    executor(resolve, reject);
  }

2.在定义的 resolve 中进行功能实现, 此时不能直接 this.PromiseState = 'resolved',因为这个 resolve 在调用的时候是直接调用的,this 指向 window,所以我们需要保存实例 this

  function Promise(executor) {
    const self = this;
    this.PromiseState = "pending";
    this.PromiseResult = null;
    function resolve(data) {}
    function reject(data) {}
    executor(resolve, reject);
  }

3.然后在定义的 resolve 函数里进行功能实现,reject 函数同理

  function Promise(executor) {
    const self = this;
    this.PromiseState = "pending";
    this.PromiseResult = null;
    function resolve(data) {
      self.PromiseState = "resolved";
      self.PromiseResult = data;
    }
    function reject(data) {
      self.PromiseState = "rejected";
      self.PromiseResult = data;
    }
    executor(resolve, reject);
  }

4.throw 抛出异常改变状态

要处理 throw 抛出的异常,就需要 try...catch,现在就是考虑加在哪里,throw 是在执行器中执行,所以我们需要把 try 包裹 executor

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

然后在 catch 修改 promise 的状态为失败,调用 reject 方法将状态改为失败,抛出的错误会传给 catch(e)的 e,所以我们只需要把 e 传给 reject()就好

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

5.promise 对象状态只能修改一次

promise 对象状态只能修改一次,所以我们在修改状态的时候要先看一下这个状态是否已经改变了,在 resolve 和 reject 函数中加个判断,如果状态为 pending 就执行,不是就直接 return

  function Promise(executor) {
    this.PromiseState = "pending";
    this.PromiseResult = null;
    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);
    }
  }