基础-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);
});
相关推荐
伍哥的传说23 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783825 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊36 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为