Basic usage of async and await

Async function

Async functions are not very different from ordinary functions without await. The main difference is that async functions always return a Promise object.

The async function returns the state of the Promise object

• Not returning anything is equivalent to returning undefined

async funcion foo(){}console.log(foo())  // The printed promise object state is a pity, and result is undefined.
Copy the code

• Return normal data similar when

async function foo() {
    return 1 // Foo returns the value of the promise object state which is fulfilled and result which is 1.
    return '1' // Foo returns the value of the promise object state which is fulfilled and result which is '1'.
    return []  // Foo returns the value of the promise object state which is fulfilled and result which is [].
    return {}  // Foo returns the value of the promise object state which is fulfilled and result which is {}.
    return Symbol(a)// Foo returns the value of the promise object state which is fulfilled and result which is Symbol().
}
Copy the code

• When the object containing the THEN method is returned, the THEN method will be called. At the same time, the THEN method will have two parameters: resolve and Reject. The state of the returned object will be fulfilled, and the state of the returned object will be rejected. If resolve or REJECT is not called in the then method, the state of the returned Promise object is Pending

async function foo() {
    return {
        then(resolve, reject) {// Then methods are called
            console.log(1) 
            resolve('then') // Foo returns the value of the promise object state which is fulfilled and result which is 'then'.}}}Copy the code

• Return a Promise object. The state of the return Promise is identical to that of the return Promise.

async function foo() {
    return new Promise((resolve, reject) = >{})}Copy the code

• Error thrown in async function.

async function foo() {
    throw new Error('error')
    Foo returns a promise object whose state is reject and result is an error message.
}
Copy the code

• To sum up, in most cases, the Promise returned by async function will be fulfilled. Only when the return value is a Promise object and the state of the Promise object is Rejected, or the object containing the THEN method and reject function is called in the THEN method. Or if an error is thrown during the function execution, the async function returns the Promise state of Rejected.

Await orders

Normally, the await command is followed by a Promise object, and if it is not, it is converted to an immediately resolve Promise object. The await command can only be used inside async functions, otherwise an error will be reported. To use await, we must ensure that the function above is async, otherwise an error will be reported.

function foo() {
    await 1 // Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
}
async function foo() {
    await 1 // This will not report an error
    function bar() {
        await 2 // This will cause an error}}Copy the code

Use await in async functions

• In async function, if an await command is used, the code following the await command will not be executed as long as the state of the promise object followed by the await command is not fulfilled.

async function foo() {
    await new Promise((resolve, reject) = >{})// As long as there is no call to resolve to change the promise state to fulfilled, the code will be blocked and will not be executed.
    // The code here is equivalent to the previous Promise then method, which is a microtask.
    console.log('Next code')}Copy the code

• When the await function is followed by a Promise object rejected, an error is thrown and the program terminates.

async function foo() {
    await new Promise((resolve, reject) = > {
        reject('reject')})// The code here will not be executed
    console.log(1)
}
foo()
Copy the code

• To prevent the above from happening, we can put await in a try… Catch statement

async function foo() {
    try {
        await new Promise((resolve, reject) = > {
            reject('reject')})}catch(err) {
        console.log(err)
    }
    // The code here will be executed.
    console.log(111)}Copy the code