前言
在ES6中的promise想必大家都会用,我想问一下,大家有没有考虑过promise是怎么实现的?
所以呢,在本篇文章中主要是给大家介绍一下promise类核心逻辑实现,希望可以帮助到大家
promise的特点
先介绍一下promise的特点
1. promise本质上就是一个类, 在执行这个类的时候,需要传递一个执行器进去,这个执行器会立即执行
2. Promise 中有三个状态分别为,成功:fulfilled 失败:rejected 等待:pending
pending => fulfilled
pending => rejected
要么是pending 变成fulfilled, 要么是pending 变成rejected 一旦状态确定就不可以更改
3. resolve函数和reject函数是用来更改状态的
4. then方法内部做的事情就是判断状态,如果是状态是成功,就调用成功的回调函数,如果状态是失败,就调用失败的回调函数
5. 每个promise对象都可以调用then方法,也就是说then方法是原型对象上的方法
6. then成功回调有一个参数表示成功之后的值,then失败回调有一个参数表示失败的原因
代码演示
//设置promise 状态
const PENDING = "pending"; //等待状态
const FULFILLED = 'FULFILLED'; //成功状态
const REJECTED = 'rejected'; //失败状态
class MyPromise {
constructor(executor) {
//立即调用函数
executor(this.resolve, this.reject)
}
//初始化状态
status = PENDING
//初始化成功之后的值
success = undefined
//初始化失败之后的值
error = undefined
resolve = success => {
//如果状态不是等待 则阻止程序执行
if (this.status !== PENDING) return
//把promise状态改为成功
this.status = FULFILLED
//保存成功之后的值
this.success = success
}
reject = error => {
//如果状态不是等待 则阻止程序执行
if (this.status !== PENDING) return
//把promise状态改为失败
this.status = REJECTED
//保存失败之后的值
this.error = error
}
then(successCallback, failCallback) {
//逻辑判断如果当前状态为成功 则执行成功的回调并且把保存成功的值传递进去
if (this.status === FULFILLED) {
successCallback(this.success);
//逻辑判断如果当前状态为成功 则执行失败的回调并且把失败的原因传递进去
} else if (this.status === REJECTED) {
failCallback(this.error)
}
}
}
//遵循commjs规范 导出
module.exports = MyPromise;
使用自己定义的promise
let MyPromise = require('./手写promise-1');
let promise = new MyPromise((resolve, reject) => {
resolve('success');
reject('error');
});
promise.then(res => {
console.log(res); //success
}, reject => {
console.log(reject);
})
这里只是最基本promise实现,并不涉及一些ES6中promise的一些api
例如Promise.all、Promise.race,这些API会在后面的文章中介绍
谢谢观看,如有不足,敬请指教