Javascript 承诺 - 为什么这些不起作用

Question

I have the following mocha test of Promises functionality but the results are confusing.

describe('test promises', () => {
    const constPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('11');
        }, 500);
    });

    const constPromise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('2222');
        }, 500);
    });

    const functionPromise = (arg) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(`${arg} 333333`);
            }, 1000);
        })
    }

    const functionPromise2 = (arg) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(`${arg} 44444444`);
            }, 1000);
        })
    }

    it('using async', async () => {

        functionPromise(1).then(a => {
            console.log(`function promise (then ): ${a}`)
        })

        const x1 = await functionPromise(2)
        console.log(`function promise (await): ${x1}`)

        functionPromise2(3).then(a => {
            console.log(`function2 promise (then ): ${a}`)
        })

        // const x2 = await promiseFn()
        const x2 = '88 NOT ACTUALLY A PROMISE'
        console.log(`function2 NOT A promise: ${x2}`)

        constPromise.then(b => {
            console.log(`const    promise (then ): ${b}`)
        })

        const a = await constPromise
        console.log(`const    promise (await): ${a}`)

        constPromise2.then(b => {
            console.log(`const2    promise (then): ${b}`)
        })

        // const a2 = await promiseConst2
        const a2 = '99 NOT ACTUALLY A PROMISE'
        console.log(`const2     NOT A promise: ${a2}`)
    })

    it('async iife', () => {
        (async () => {
            functionPromise(3).then(a => {
                console.log(`function promise (then): ${a}`)
            })

            constPromise.then(b => {
                console.log(`const promise (then): ${b}`)
            });

            const x = await functionPromise(4)
            // const x = 'NOT ACTUALLY A PROMISE'// await myPromiseFn()
            console.log(`function promise (await): ${x}`)

            // return myPromise.then(a => console.log(`promise: ${a}`)).catch(e => console.log(`promise error: ${e}`))
            const a = await constPromise
            console.log(`const promise (await): ${a}`)

        })()
    })
})

The results are this:

/Users/abba/.nvm/versions/node/v12.22.6/bin/node /Users/abba/dev/_tools/updateUsersData/node_modules/mocha/bin/mocha --ui bdd --reporter /Applications/IntelliJ IDEA.app/Contents/plugins/NodeJS/js/mocha-intellij/lib/mochaIntellijReporter.js /Users/abba/dev/_tools/updateUsersData/test/app-spec2.js --grep ^test promises 

function promise (then ): 1 333333
function promise (await): 2 333333
function2 NOT A promise: 88 NOT ACTUALLY A PROMISE
const    promise (then ): 11
const    promise (await): 11
const2     NOT A promise: 99 NOT ACTUALLY A PROMISE
const2    promise (then): 2222
iife const promise (then): 11

Aswell as Nodejs v12.22.6 i tried Nodejs 16.8.0.

Things to note that confuse me:

1. There is NO function2 promise (then ): 3

But there is function promise (await): 2 . The await was required to trigger the .then() it seems from the functionPromise equivalent tests. Why is this?

2. The same does not seem to hold for the constPromises - const2 promise (then): 2222 came out despite there being no await constPromise2 . Why is the behaviour of Promises in variables compared to Promises from function differ?

3. There is ONE result from async iife test BUT if i run it alone without the other there are NONE. Why is this?

Any deeper explanation would be appreciated.

Answer 1

Ok so this confused me a bit but I figured it out. It might be a little confusing so feel free to ask for more clarification but I'll try my best. The key factor of what's getting logged and what's not is a function of time. Let us see what the tests are doing and what's their result.

First test - "using async"

functionPromise(1).then(a => {
            console.log(`function promise (then ): ${a}`)
        })

functionPromise returns a promise but since we are not awaiting that promise (by saying await functionPromise) the code will move forward. .then() does not block the flow of code but only calls the function inside it after the promise is resolved, asynchronously.

const x1 = await functionPromise(2)
        console.log(`function promise (await): ${x1}`)

Since you are awaiting (by putting await) for the functionPromise to resolve this time, it will wait for the promise to resolve (basically wait a second) and then log the next line. But note, the first promise call would have also been resolved by now (just before this one) and would have run the resolve, after which the next line executes and logs your second result.

So the log as of now looks like

function promise (then ): 1 333333
function promise (await): 2 333333

Good? Next up is functionPromise2

functionPromise2(3).then(a => {
    console.log(`function2 promise (then ): ${a}`)
})

Now although the functions are identical, here's why it doesnt log anything. As we saw for the first promise, this call also does not wait for the promise to resolve and hence does not log anything immediately and moves to the next line., which is -

 const x2 = '88 NOT ACTUALLY A PROMISE'
        console.log(`function2 NOT A promise: ${x2}`)

and hence that gets added to the log. Remember, the log for functionPromise2 will be logged, but after 1 second.

So the log as of now is expected to be -

function promise (then ): 1 333333
function promise (await): 2 333333
function2 NOT A promise: 88 NOT ACTUALLY A PROMISE

as you've shown as well. Next

 constPromise.then(b => {
            console.log(`const    promise (then ): ${b}`)
        })

Again. No await. So we move on. Nothing gets logged. This log will run in 500 ms as that's when constPromise resolves. Although, just after this you call

const a = await constPromise
        console.log(`const    promise (await): ${a}`)

with await. This waits for 500 ms. This allows the previous promise to resolve as well and we get 2 logs

const    promise (then ): 11
const    promise (await): 11

So log as of now

function promise (then ): 1 333333
function promise (await): 2 333333
function2 NOT A promise: 88 NOT ACTUALLY A PROMISE
const    promise (then ): 11
const    promise (await): 11

Next.

constPromise2.then(b => {
            console.log(`const2    promise (then): ${b}`)
        })

since we're not awaiting, this doesnt log anything, yet. Code moves forward.

const a2 = '99 NOT ACTUALLY A PROMISE'
console.log(`const2     NOT A promise: ${a2}`)

After a while, Then this code logs

const2     NOT A promise: 99 NOT ACTUALLY A PROMISE

Then after 500ms constPromise2 resolves and logs

const2    promise (then): 2222

So the logs are actually as expected.

Now for "async iife" Since the test case is not async, the test case would synchronously run the function inside. All the lines run and the test exits.

Now comes a bit of gray area which i'm not 100% sure of.

const2    promise (then): 2222
iife const promise (then): 11

These logs happen after the test case has actually finishes as they were awaited on, but since the test cases themselves probably take about 500 ms to wrap up, this log is able to make its way to the console. Maybe a higher timeout for these would prove this theory.

Answer 2

The reason is I was using Mocha v3.5.3 (the latest is v9.1.3).

So when I was using Mocha v3.5.3 and the tests are run from the terminal we see:

> ./node_modules/mocha/bin/mocha --timeout 10000 ./test/app-spec2.js


  test promises
function promise (then ): 1 333333
function promise (await): 2 333333
function2 NOT A promise: 88 NOT ACTUALLY A PROMISE
const    promise (then ): 11
const    promise (await): 11
const2     NOT A promise: 99 NOT ACTUALLY A PROMISE
const2    promise (then): 2222
    ✓ using async (1001ms)
    ✓ async iife
iife const promise (then): 11


  2 passing (1s)

But when I upgrade to the latest Mocha we see:

> ./node_modules/mocha/bin/mocha --timeout 10000 ./test/app-spec2.js


  test promises
function promise (then ): 1 333333
function promise (await): 2 333333
function2 NOT A promise: 88 NOT ACTUALLY A PROMISE
const    promise (then ): 11
const    promise (await): 11
const2     NOT A promise: 99 NOT ACTUALLY A PROMISE
const2    promise (then): 2222
    ✔ using async (1004ms)
    ✔ async iife
iife const promise (then): 11


  2 passing (1s)

function2 promise (then ): 3 44444444
iife function promise (then): 3 333333
iife function promise (await): 4 333333
iife const promise (await): 11

So you can see all promises are resolving. However you can also see that the promises that were 'missing' are resolving AFTER the test completes.

Interestingly IntelliJ seems to truncate the output after the output (and I never see it) - but this is a separate problem.

I tried adding a 'done' method:

   it('using async', async (done) => {
        // console.log(`before promise call outside`)

        functionPromise(1).then(a => {
            console.log(`function promise (then ): ${a}`)
        })

        ...

        done()
        assert.isTrue(true)
    })

But the mis-alignment still exists and i get an error:

Error: Resolution method is overspecified. Specify a callback *or* return a Promise; not both

I'm not why this is. But this use of Promises in Mocha tests is not normal and I'm not going to pursue this right now. I seem to have the answer to keep me moving forward with what I was actually working on.

Answer 3

I couldn't let this go and needed to find out how to solve the problem where the promise resolves after the test completes as seen in the question and my previous answer - https://stackoverflow.com/a/70320537/1019307 .

I put together some more code showing how best to use timeouts with promises.

describe('test promises', () => {
    const timeout=2500
    let startTime
    beforeEach(() => {
        startTime = new Date()
    })
    afterEach(() => {
        const endTime = new Date()
        const diff = endTime - startTime
        console.log(`          time to run test: ${diff} ms`)
    })
    describe('new tests', () => {
        // Both then and await fail for this
        const failurePromiseFn = (arg) => {
            return new Promise(resolve => {
                setTimeout(
                    resolve(`${arg} - failurePromiseFn`), timeout);
            })
        }

        // Both succeed
        const successPromiseFn = (arg) => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(`${arg} - successPromiseFn`)
                }, timeout);
            })
        }

        describe('these dont work - they finish BEFORE end of test BUT timeout fails', () => {
            it('failurePromiseFn - then', (done) => {
                // order correct, no timeout
                failurePromiseFn(1).then(res => {
                    console.log(`          failurePromiseFn - then: ${res}`)
                    done()
                })
            })
            it('failurePromiseFn - await', async () => {
                // order correct, no timeout
                const res = await failurePromiseFn(2)
                console.log(`          failurePromiseFn - await: ${res}`)
            })
        })

        describe('these work - they finish BEFORE end of test AND timeout succeeds', () => {
            it('successPromiseFn - await', async () => {
                // order correct, yes timeout
                const res = await successPromiseFn(3)
                console.log(`          successPromiseFn - await: ${res}`)
            })

            it('successPromiseFn - then', (done) => {
                // order not correct, yes timeout
                successPromiseFn(4).then(res => {
                    console.log(`          successPromiseFn - then: ${res}`)
                    done()
                })
            })
        })

        describe('other examples from internet', () => {
            const delay = t => new Promise(resolve => setTimeout(resolve, t));

            it('using delay - then - succeeds', (done) => {
                delay(timeout).then(() => {
                    console.log('          Hello')
                    done()
                });
            })

            it('using delay - then - fails as no done so timeout fails', () => {
                delay(timeout).then(() => {
                    console.log('          Hello')
                });
            })

            it('using delay - await - succeeds', async () => {
                await delay(timeout)
                console.log('          Hello')
            })
        })
    })
})

The results are:

  test promises
    new tests
      these dont work - they finish BEFORE end of test BUT timeout fails
          failurePromiseFn - then: 1 - failurePromiseFn
        ✓ failurePromiseFn - then
          time to run test: 3 ms
          failurePromiseFn - await: 2 - failurePromiseFn
        ✓ failurePromiseFn - await
          time to run test: 0 ms
      these work - they finish BEFORE end of test AND timeout succeeds
          successPromiseFn - await: 3 - successPromiseFn
        ✓ successPromiseFn - await (2504ms)
          time to run test: 2504 ms
          successPromiseFn - then: 4 - successPromiseFn
        ✓ successPromiseFn - then (2501ms)
          time to run test: 2501 ms
      other examples from internet
          Hello
        ✓ using delay - then - succeeds (2503ms)
          time to run test: 2503 ms
        ✓ using delay - then - fails as no done so timeout fails
          time to run test: 1 ms
          Hello
          Hello
        ✓ using delay - await - succeeds (2504ms)
          time to run test: 2504 ms


  6 passing (10s)