共计 1731 个字符,预计需要花费 5 分钟才能阅读完成。
手写 promise,他的原理实现基于 promise 特色而来,实现比较复杂,须要一步一步来,由简而繁。
首先须要晓得 promise 的特色有哪些。
let promise = new Promise((resolve,reject)=>{resolve('success');
// reject("failed");
})
promise.then((value)=>{},(reason)=>{});
一个最简略的应用办法,new 关键字结尾,阐明 promise 是一个类,在类执行的时候须要传递一个执行器,并且会立刻执行,他有两个参数,一个 resovle
, 一个reject
。其实是两个函数。
Promise 有三种状态,fulfilled
(胜利),rejected
(失败)和pending
(期待)。由pending
->fulfilled
或者是 pending
->rejected
。状态一旦确定便不能扭转,resovle
和reject
就是用来扭转状态的。
promise 外面有个 then 办法,它定义在原型对象中。用来判断状态,胜利就执行胜利之后该做的事件,失败就执行失败之后做的事件, 并且有参数来示意胜利之后的值或者失败起因
所以 Promise
至多有如下四种特点
Promise
就是一个类,在执行这个类的时候,须要传递一个执行器进去,执行器会立刻执行Promise
中有三种状态,一旦状态确定便不可更改resovle
和reject
函数是用来更改状态的then
办法外部做的事件就判断状态,如果状态是胜利,调用胜利的回调函数,如果状态是失败,调用失败回调函数,then
办法是被定义在原型对象中的then
的胜利回调有一个参数示意胜利之后的值,then
失败回调有一个参数示意失败后的起因
依据下面的特点,实现代码如下:
// 定义三个状态
const PENDING = 'pending'; // 期待
const FULFILLED = 'fulfilled'; // 胜利
const REJECTED = 'rejected'; // 失败
class MyPromise {constructor(executor) {executor(this.resolve, this.reject);
}
// 定义一个示意状态的变量
status = PENDING;
// 定义两个实例属性,示意胜利之后的值和失败后的起因
value = undefined;
reason = undefined;
// 两个属性, 这里定义成箭头函数,是因为咱们在应用的时候是间接调用,// 而一般函数外部 this 的指向 window 或者是 undefined,定义成箭头函数使函数外部 this 指向指向类实例对象
resolve = value => {
// 如果状态不是期待,阻止程序向下进行
if (this.status !== PENDING) return
// 更改状态为胜利
this.status = FULFILLED
// 保留胜利的值
this.value = value;
}
reject = reason => {
// 如果状态不是期待,阻止程序向下进行
if (this.status !== PENDING) return
// 更改状态为失败
this.status = REJECTED
// 保留失败的起因
this.reason = reason;
}
then(successCallback, failedCallback) {
// 状态判断
if (this.status === FULFILLED) {successCallback(this.value)
} else if (this.status === REJECTED) {failedCallback(this.reason)
}
}
}
module.exports = MyPromise;
测试代码:
const MyPromise = require('./mypromise');
let promise = new MyPromise((resolve, reject) => {// resolve('---success----');
reject("---failed----");
})
promise.then(value => {console.log(value);
}, reason => {console.log(reason)
})
测试胜利。
正文完
发表至: javascript
2021-08-12