基础-promise的实现过程(1)

Promise是什么?之前已经对这个进行了解释,那现在就来来分析分析它的创建和用法。我们写Promise其实就是在写一个构造器,通过new Promise来给它传一个函数作为参数,这就能创建一个Promise。那现在就来试写一下这个构造器。

js 复制代码
class myPromise {
  constructor() {}
}

这个构造函数有没有参数呢?需要一个参数,而且是函数,其实这个函数就是表示的就是一个任务的执行过程,它描述了一个任务开始做什么,后面做什么的事情。而且这个函数是同步函数,当调用promise的时候立即执行的。

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
 constructor(excutor) {
    excutor()
  }
}

这就是基本的结构了。然后这个excutor会传递两个参数resolvereject

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
  constructor(excutor) {
    excutor(this._resolve, this._reject);
  }

/**
 * @description: 标记当前任务完成
 * @param {*} value 任务完成的相关数据
 */
_resolve(value) {}


/**
 * @description: 标记当前任务失败
 * @param {*} reason 任务失败的相关数据
 */
_reject(reason) {}
}

Promise有三个状态,刚开始的时候是pending,完成之后是fulfilled,失败之后是rejected,所以啊,不管是成功也好,失败也好,实际上是要改变状态的。 因此,

js 复制代码
//myPromise.js

_resolve(value) {
    //改变状态和数据
    console.log(value);
  }
  
 _reject(reason) {
    //改变状态和数据
    console.log(reason);
  }

那状态和数据在哪呢?其实就可以给这个class添加属性嘛。

js 复制代码
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve, this._reject);
  }
 _resolve(value) {
    //改变状态和数据
    this._state = "fulfilled";
    this._value = value;
  }
  _reject(reason) {
    //改变状态和数据
    this._state = "rejected";
    this._value = reason;
  }

然后你会发现报错了,找不到那两个属性。其实就是找不到thisthis的指向取决于谁调用它,那在这里是resolve函数在调用,直接调用,按理说应该是指向全局变量,但这里使用的是class创建的,处在严格模式下,所以这个this指向undefined

我们希望this指向当前的myPromise对象,construtor里的this指向myPromise,那我们修改this._resolve的指向就可以了。

js 复制代码
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve.bind(this), this._reject.bind(this)); //绑定this
  }

到这里,myPromise的基本架子就搭好了。

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve.bind(this), this._reject.bind(this)); //绑定this
  }

  /**
   * @description: 标记当前任务完成
   * @param {*} value 任务完成的相关数据
   */
  _resolve(value) {
    //改变状态和数据
    this._state = "fulfilled";
    this._value = value;
  }

  /**
   * @description: 标记当前任务失败
   * @param {*} reason 任务失败的相关数据
   */
  _reject(reason) {
    //改变状态和数据
    this._state = "rejected";
    this._value = reason;
  }
}

const p = new myPromise((resolve, reject) => {
  resolve(1213);
});
相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript