简单版Promise实现

前言

前一阵子腾讯的一面, 你能写一个Promise吗, 我就懵了, 面完赶快找博客研究, Promise实现可能是现在面试官很容易问到的一个问题

具体实现

1. 基本骨架

const PENDING = 'pending', RESOLVED = 'resloved', REJECTED = 'rejected' // 先定义三个状态
function MyPromise(fn) {
    const _this = this;
    _this.state = PENDING; // 先设置状态为初始状态
    _this.value = null; // value是用于保存reslove函数或者reject函数传入的值
    _this.resolvedCallbacks = []; // 成功回调队列
    _this.rejectedCallbacks = []; // 失败回调队列
    function resolve(value) {
        
    }
    function reject(value) {
        
    }
}
MyPromise.prototype.then = function (onFullfilled, onRejected) {
    
}
复制代码

上面一个最简单的骨架没有实现resolve, reject, 和最复杂的then函数 --- 应该不难理解

下面实现reslove和reject 函数, 两个类似, 就写一个注释了

function reslove(value) {
    if (_this.state === PENDING) { // 先判断状态是不是初始状态
        _this.state = RESOLVED; // 首先改变state
        _this.value = value; // 把值给内部
        _this.resolvedCallbacks.map(item => item(_this.value)) // 遍历执行resloved函数队列
    }
}
function reject(value) {
    if (_this.state === PENDING) {
        _this.state = REJECTED;
        _this.value = value;
        _this.rejectedCallbacks.map(item => item(_this.value))
    }
}
复制代码

下面就该尝试执行fn了 在MyPromise内部reject函数下面添加

try {
    fn(resolve, reject) // 证明了new Promise时传入的函数是立即执行的
} catch (e) {
    reject(e) // 并且内部有错误直接reject执行
}
复制代码

以上, MyPromise函数完成, 下一步实现比较复杂的.then函数

MyPromise.prototype.then = function (onFullfilled, onRejected) {
    const _this = this;
    onFullFilled = typeof onFullfilled === 'function' ? onFullfilled : onFullfilled: v => v; // 保证参数是函数
    onRejected = typeof onRejected === 'function' ? onRejected : onRejected: r => {throw r} 
    if (_this.state === PENDING) { // 如果状态是初始状态就往队列里面添加函数
        _this.reslovedCallbacks.push(onFullfilled);
        _this.rejectedCallbacks.push(onRejected);
    }
    if (_this.state === RESLOVED) { // 如果状态改变就执行函数
        onFullfilled(_this.value)
    }
    if (_this.state === REJECTED) {
        onRejected(_this.value)
    }
}

复制代码

试试:

new MyPromise((resolve, reject) => {
    resolve(1); // 未来执行
    reject()
}).then(value => {
    console.log(value) // 1
})
复制代码

以上就是简单版Promise实现, 大家看完后可以再进阶看Promise/A+ 规范的Promise实现应该更容易理解

转载于:https://juejin.im/post/5c9f581f6fb9a05e66689601