JS asynchronous code unit testing magic Promise

Preface

The reason for writing this article is that when writing unit tests, I did the following tests:

new Promise((resolve, reject) => reject(1)).then().catch(err => {
    console.log(err)
})
async function jestTest () {
    await Promise.resolve().then()
    console.log('At this time, the catch is expected to have been called and the log is output')
}
jestTest()

It is not possible to use await to block the test code until the catch is called in the Event Loop, thereby detecting the execution of the catch and passing the test.

The word "magic" is used because there are indeed many default handlers and implicit transfer of values ​​in the chain call of promsie.

Promise chaining

In order not to waste your time, let's look at an example:

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})
.then(res => {
    console.log('promise1-4 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    throw new Error('mock error 1')
})
.then(res => {
    console.log('promise2-2 then')
    throw new Error('mock error 2')
})
.catch(err => {
    console.log(err)
})

If your answer to the above code output sequence is the same as the following, then you can skip this article:

promise1-1 then

promise2-1 then

promise1-2 then

promise1-3 then

Error: mock error 1

promise1-4 then

First of all, there is a premise, that is, you already know that the then calls of these two promises are stacked crosswise (as can be seen from the first three lines of output). If you are not sure about this part, you can refer to the relevant articles on Event Loop. At the same time, it should be noted that in the versions specified in the article, Chrome and Nodejs Event Loop mechanisms are already the same.

MDN Error

Let's look at the original (I modified it) MDN description of catch:

Basically, a promise chain stops if there's an exception, looking down the chain for catch handlers instead.

The chain call will stop when an exception occurs, and the catch statement will be found in the chain for execution.

My initial misunderstanding was the same. I mistakenly thought that catch would directly catch the first thrown Error, that is, Error would be output after promise1-2, that is, the then where promise2-2 is located would not be added to the call stack.

However, by observing the actual output results, we find that this is not the case. This shows that the literal meaning of MDN's explanation should be wrong. The chain call did not stop, but executed something we did not see.

Chained default handling

At this point we need to know the default processing of then, and we also directly quote the description of MDN:

If the Promise that then is called on adopts a state (fulfillment or rejection) for which then has no handler, a new Promise is created with no additional handlers, simply adopting the final state of the original Promise on which then was called.

If your promise's then lacks a callback for corresponding state processing, then then will automatically generate a promise that accepts the state of this promise, that is, then will return a promisesie with the same state reference and hand it over to subsequent calls.

Then the second promise part in the above code is equivalent to

Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
    throw new Error('mock error 1')
})
.then(res => {
    console.log('promise2-2 then')
    throw new Error('mock error 2')
// Note this onRejected
}, (err) => {
    return Promise.reject(err)
})
.catch(err => {
    console.log(err)
})

That is to say, the then of promise2-2 is executed between promise1-2 and promise1-3 of the output results, which means that the chain call is not stopped directly, and the then of promise2-2 is still added to the call stack. The catch is not the error thrown by the first then that is directly caught, but the promise of the same status returned by the hidden onRejected.

Abbreviation

Similarly, we need to know that catch(onRejected) is an abbreviation of then(undefined, onRejected), that is, even if there is no error in the previous call of the call chain, catch will enter the call stack instead of skipping it directly.

Promise.resolve('promise1')
.then(res => {
    console.log('promise1-1 then')
})
.then(res => {
    console.log('promise1-2 then')
})
.then(res => {
    console.log('promise1-3 then')
})


Promise.resolve('promise2')
.then(res => {
    console.log('promise2-1 then')
})
.catch(err => {
    console.log(err)
})
.then(res => {
    console.log('Actually I am promise2-3 then')
})

async await

The first thing to note is that in the NodeJs and Chrome versions specified in the article, f(await promise) is completely equivalent to promise.then(f).

Of course, when discussing promises, we cannot ignore async await. Although the processing logic of the two is the same when the promise state is onResolve, the execution logic of error handling is different. When an error occurs in async await, the execution of subsequent await is truly skipped directly.

const promiseReject = new Promise((resolve, reject) => {
    reject(new Error('error'))
})
const promiseResolve1 = new Promise((resolve, reject) => {
    resolve('correct')
})
const promiseResolve2 = new Promise((resolve, reject) => {
    resolve('correct')
})
const promiseResolve3 = new Promise((resolve, reject) => {
    resolve('correct')
})
function demo1 () {
    promiseReject
    .then(() => {
        console.log('1-1')
    })
    .catch(err => {
        console.log('1-2')
    })
}

async function demo2 () {
    try {
        await promiseReject
        await promiseResolve1
        await promiseResolve2
        await promiseResolve3
    } catch (error) {
        console.log('2-1')
    }
}
// 2-1
// 1-2

The above is the details of the magical Promise of JS asynchronous code unit testing. For more information about the Promise of JS asynchronous code, please pay attention to other related articles on 123WORDPRESS.COM!