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