跳到主要内容

JavaScript中手写promise ?

参考答案:

在JavaScript中,我们可以手写一个基本的Promise对象。Promise是一种用于处理异步操作的对象,它有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

下面是一个基本的Promise实现:

class MyPromise {
    constructor(executor) {
        this.status = 'pending';  // 初始状态为pending
        this.value = undefined;  // fulfilled时的值
        this.reason = undefined;  // rejected时的原因
        this.onFulfilledCallbacks = [];  // 存储fulfilled时的回调函数
        this.onRejectedCallbacks = [];  // 存储rejected时的回调函数

        // 执行传入的executor函数
        let resolve = (value) => {
            if (this.status === 'pending') {
                this.status = 'fulfilled';
                this.value = value;
                this.onFulfilledCallbacks.forEach(fn => fn());
            }
        }

        let reject = (reason) => {
            if (this.status === 'pending') {
                this.status = 'rejected';
                this.reason = reason;
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }

        try {
            executor(resolve, reject);
        } catch (err) {
            reject(err);
        }
    }

    then(onFulfilled, onRejected) {
        if (this.status === 'fulfilled') {
            onFulfilled(this.value);
        }
        if (this.status === 'rejected') {
            onRejected(this.reason);
        }
        if (this.status === 'pending') {
            this.onFulfilledCallbacks.push(() => {
                onFulfilled(this.value);
            });
            this.onRejectedCallbacks.push(() => {
                onRejected(this.reason);
            });
        }
    }
}

在这个实现中,我们定义了一个MyPromise类,它有一个构造函数constructor,接收一个executor函数作为参数。executor函数接收两个参数:resolvereject,分别用于改变Promise的状态和值。

我们还定义了一个then方法,用于处理fulfilled和rejected状态。如果Promise已经处于fulfilled或rejected状态,那么就直接调用相应的回调函数;如果Promise还处于pending状态,那么就把回调函数存储起来,等待状态改变后再调用。

需要注意的是,这个实现是非常基础的,并没有涵盖Promise的所有特性和用法,比如链式调用、错误处理等。在实际开发中,我们通常会使用原生的Promise对象,或者使用一些第三方库(如Bluebird、axios等)提供的Promise实现。