基础-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);
});
相关推荐
EveryPossible7 分钟前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说8 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒13 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52017 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者24 分钟前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫3 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A9 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理9 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js