Talking about Promise, async and await

Promise basic concept

Promise is an object, and its definition format is like this

new Promise((resolve, reject) => {
        
})
//后面可以接then或catch

promise has three states: {

1. pending-----[to be determined] initial state

2. fulfilled----- [implementation] the operation is successful

3. rejected -------[rejected] operation failed

}

resolve and reject are two parameters used to mark promise fulfillment or veto status respectively

When the state of the promise changes, the response function of then() or catch() will be triggered to process the next steps. If it is marked as resolve, then() will be triggered, otherwise it will be catch()

Once the promise state is changed, it will not change again.

The state of the Promise object changes, there are only two possibilities:

From pending to fulfilled

From pending to rejected.

As long as these two situations happen, the state will freeze and will not change again.

Practice is the sole criterion for testing truth

demo

demo()
function demo() {
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('已过两秒')
        }, 2000);
    }).then(res => {
        console.log('res: ', res)
    })
}

Running result: output res after two seconds

This shows that the then method can get the content of the resolve () tag and use

Try replacing it with reject:

demo()
function demo() {
    new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('已过两秒')
        }, 2000);
    }).then(res => {
        console.log('res: ', res)
    }).catch(err => {
        console.log('err: ', err)
    })
}

It can be seen that the statement in then is not executed, but jumps directly to catch

demo2

demo2()
function demo2() {
    new Promise((resolve, reject) => {
        resolve('标记为resolve')
        reject('标记为reject')
        console.log('如果输出这一句话，说明resolve和reject后的语句还可以执行')
    }).then(res => {
        console.log('第一次then: ', res)
        return '第一次then的return值'
    }).then(res => {
        console.log('第二次then：', res)
    }).catch(err => {
        console.log('catch: ', err)
    })
}

operation result:

The results illustrate three things:

1. resolve and reject just mark the status of the promise, and will not directly execute the statement in then or catch

2. Once the promise state is marked, it will not change because the catch is not executed

3. The value returned in then() can be called by the next then()

Basic concepts of async and await

async is the abbreviation of asynchronous (translation result: asynchronous)

await is the abbreviation of async wait, that is, asynchronous waiting

async is the declaration of a function , which is used to declare that the function is an asynchronous function. It does not mean that if you want to make a function asynchronous, you must need async

This statement is only for the use of await

await is used to wait for the execution of an expression or function to complete. It is not allowed to execute subsequent statements before completion , and can only be used in functions with async declarations

That is to say, if a function declares async, but does not use await in this function, the declaration is meaningless, and it will be whatever it is.

practice

demo3

testDemo3()

function demo3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('ok')
            console.log('三秒已过')
        }, 3000);
    })
}

async function testDemo3() {
    console.log(demo3())
    console.log(await demo3())
    console.log('看看这一句话出来要多久:')
}

operation result

Output immediately after running:

Continue to output after three seconds :

Let's analyze it:

1. When the log is executed for the first time, demo3() is output immediately because it is not marked with await, and the statement in demo3() is executed, and demo3() returns a promise object, so it will output Promise{ <pending> }, pending means that the promise object at this moment is still in the initial state. After three seconds, the execution of demo3() is completed, and the output is 'three seconds have passed' (output first and then execute, and it took three seconds to execute)

2. The second log is immediately after the first log, and demo3() is marked with await, so when demo3() is executed, that is, after 3 seconds, the log is executed. (It started before the first demo3 was executed, and the interval between the second demo3 and the first time was very short) So the two 'three seconds have passed' appeared almost at the same time. Then I also found that demo3 marked with await will return its resolve value

3. The third log also came out after three seconds, which means that he was blocked by the await in the second log

Change testDemo3, demo3 remains unchanged:

testDemo3()

function demo3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('ok')
            console.log('三秒已过')
        }, 3000);
    })
}

async function testDemo3() {
    let x = await demo3()
    console.log('x: ', x)
}

operation result

demo4

demo4()

async function demo4() {
    let pro = new Promise(resolve => {
        setTimeout(() => {
            console.log('五秒已过')
            resolve('ok')
        }, 5000);
    })
    console.log('pro: ', pro)
    await pro
    console.log('pro: ', pro)
}

operation result