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

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

js 复制代码

class myPromise {
  constructor() {}
}

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

js 复制代码

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

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

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;
  }

然后你会发现报错了，找不到那两个属性。其实就是找不到this，this的指向取决于谁调用它，那在这里是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);
});