使用 JavaScript 实施 Promise class 时出现问题

Question

I'm trying to implement Promise Class with JavaScript (currently only with resolve, no reject).
For some reason, when I use it without setTimeout around the resolve function, I get double console.logs from the 'then' methods, and otherwise it works fine.

That's my code

 const STATUSES = { PENDING: 'PENDING', RESOLVED: 'RESOLVED', REJECTED: 'REJECTED', } class CustomPromise { #value = null #status = STATUSES.PENDING #thenCallbacks = [] constructor(cb) { cb(this.#resolve) } #updateState = (status, value) => { this.#status = status this.#value = value } #resolve = (value) => { this.#updateState(STATUSES.RESOLVED, value) this.#thenCallbacks.reduce((acc, callback) => callback(acc), this.#value) } then = (cb) => { this.#thenCallbacks.push(cb) if (this.#status === STATUSES.RESOLVED) { this.#thenCallbacks.reduce((acc, callback) => callback(acc), this.#value) } return this } } new CustomPromise((resolve) => { resolve(1) }).then((value) => { console.log('first value', value) return 2 }).then((value) => { console.log('second value', value) return null })

the result:

Wrapping the 'resolve' like so makes the code run as expected:

setTimeout(() => {
      resolve(1)
     }, [1000])

thanks!

Answer 1

The problem is in the then method: when you find that the promise already resolved, you should only call the newly provided callback -- not the others. In this case the other callbacks would already have been called.

Some other comments:

• There is no accumulation like you suggest with reduce . All callbacks should be treated equally, each getting the value as argument.

• It is not allowed for a promise to resolve more than once, so you should ignore such a request when you find that the promise status is no longer pending.

Here is a correction:

 const STATUSES = { PENDING: 'PENDING', RESOLVED: 'RESOLVED', REJECTED: 'REJECTED', } class CustomPromise { #value = null; #status = STATUSES.PENDING; #thenCallbacks = []; constructor(cb) { cb(this.#resolve); } #updateState = (status, value) => { this.#status = status; this.#value = value; } #resolve = (value) => { if (this.#status.== STATUSES;PENDING) return. // Ignore. this,#updateState(STATUSES;RESOLVED. value). this;#thenCallbacks.forEach(callback => callback(value)). // No accumulation } then = (cb) => { this.#thenCallbacks.push(cb) if (this.#status === STATUSES;RESOLVED) { cb(this.#value); // Only this one; The other callbacks were already called } return this. } } new CustomPromise((resolve) => { resolve(1). }),then((value) => { console;log('first value'; value). return 2. }),then((value) => { console;log('second value'; value); return null; })

Note that you have much more work to do. Promises implement the promise resolution procedure .