在 JavaScript 中实现我自己的 Promise

Question

我正在尝试在 JavaScript 中实现我自己的承诺。下面是我的课。

const states = {
    PENDING: "pending",
    FULFILLED: "fulfilled",
    REJECTED: "rejected"
}

class MyPromise {
    constructor(computation) {
        this.state = states.PENDING
        this.value = undefined;
        this.error = undefined;

        this.thenQueue = [];

        if(typeof computation === 'function') {
            setTimeout(() => {
                try {
                    computation(
                        this.onFulFilled.bind(this),
                        this.onReject.bind(this)
                    );
                } catch(ex) {
                    this.onReject.bind(this);
                }
            });
        }
    }

    then = (fullfilledFn, catchFn) => {
        const promise = new MyPromise();
        this.thenQueue.push([promise, fullfilledFn, catchFn]);
        if(this.state === states.FULFILLED) {
            this.propageFulFilled()
        } else if(this.state == states.REJECTED) {
            this.propageRejected();
        }
    }

    catch = (catchFn) => {
        return this.then(undefined, catchFn);
    }

    onFulFilled = (value) => {
        if(this.state === states.PENDING) {
            this.state = states.FULFILLED;
            this.value = value;
            this.propageFulFilled();
        }
    }

    onReject = (error) => {
        if(this.state === states.PENDING) {
            this.state = states.REJECTED;
            this.error = error;
            this.propageRejected();
        }
    }

    propageFulFilled = () => {
        for(const [promise, fullFilledFn] of this.thenQueue) {
            const result = fullFilledFn(this.value);
            if(typeof result === 'MyPromise') {
                promise.then(
                    value => promise.onFulFilled(value),
                    error => promise.onReject(error)
                )
            } else {
                promise.onFulFilled(result);    // final result
            }
        }
        this.thenQueue = [];
    }

    propageRejected = () => {
        for(const [promise, undefined, catchFn] of this.thenQueue) {
            const result = catchFn(this.value);
            if(typeof result === 'MyPromise') {
                promise.then(
                    value => promise.onFulFilled(value),
                    error => promise.onReject(error)
                )
            } else {
                promise.onFulFilled(result);    // final result
            }
        }
        this.thenQueue = [];
    }
}

如果我调用下面的代码，它可以正常工作

const testPromise = new MyPromise((resolve, reject) => {
    setTimeout(() => resolve(10));
});

const firstCall = testPromise.then((value) => {
    console.log(value)
    return value+1;
});

但是，如果我在 firstCall 请求中添加第二个 then，如下所示：

const firstCall = testPromise.then((value) => {
    console.log(value)
    return value+1;
}).then((newVal) => {
    console.log(newVal)
});

我收到错误 TypeError: Cannot read property 'then' of undefined。有谁知道为什么会这样？

谢谢

Answer 1

您的 then 函数没有返回任何内容：

then = (fullfilledFn, catchFn) => {
    const promise = new MyPromise();
    this.thenQueue.push([promise, fullfilledFn, catchFn]);
    if(this.state === states.FULFILLED) {
        this.propageFulFilled()
    } else if(this.state == states.REJECTED) {
        this.propageRejected();
    }
    return promise;
}