async/await in JS

This time I will bring you async/await in JS. What are the precautions when using async/await in JS. Here are practical cases, let’s take a look.

Asynchronous operations in JS have evolved from the initial callback function to Promise, and then to Generator, which are all gradual improvements. The emergence of async functions seems to see the end of the asynchronous solution. Use Write asynchronously in a synchronous way.

A brief explanation of the async function is the syntactic sugar of the Generator function.

How to write the Generator function

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = function* (){    let p1 = yield promise('1');    let p2 = yield promise('2');
};let genF = gen();

How to write the async function

let promise = function (val){    return new Promise(function (resolve, reject){
        setTimeout(()=>{            console.log(val);
            resolve(val);
        },1000);
    });
};let gen = async function (){    let p1 = await promise('1');    let p2 = await promise('2');
};

The async function is an improvement on the Generator function. In the syntax, the asterisk of the Generator function is replaced by async, yield Replaced with await.
And async is also different from the Generator function:

It comes with a built-in executor, the Generator function needs to rely on the executor, and async can be the same as an ordinary function, only one line is needed

relative to the Generator function , async and await semantics are clearer

Strong applicability, yield can only be Thunk functions and Promise objects, and await can be Promise objects and primitive type values ​​(numeric values, Strings, Boolean, etc.)

async function

The expectation placed on the async function is to help us solve asynchronous operation problems, so we need to understand the return value of the async function What is it.

async function asyncAwait() {    return 'async await';
}let a = asyncAwait();console.log(a);

Result output:

Promise {<resolved>: "async await"}

It can be seen that the async function returns a Promise object. If a direct value is returned in the function, the async function will be encapsulated into a Promise object and returned, and if there is no return value, the async function will return undefined

Promise {<resolved>: undefined}

When await is not combined, the async function will be executed immediately and return a Promise object.

await waiting

await is a operator, and the result of waiting is a Promise object or other value, such as:

function func1() {    return 'async';
}async function func2() {    return Promise.resolve('await');
}async function asyncAwait() {    let f1 = await func1();    let f2 = await func2();    console.log(f1, f2);
}
asyncAwait()

Result output:

async await

awaitThe operation of expression depends on the result of waiting. If what it waits for is not a Promise object, the result of the operation is what it waits for,
If it waits for a Promise object, it will block the following code, wait for the Promise object to resolve, and then get the resolved value as the result of the expression.
Async function calls will be encapsulated in Promise, which is why await needs to be used in async functions.

async/await chain processing

For multiple asynchronous operations, Promise's then can solve the problem of multi-layer callbacks.

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}function submit(){    console.time('submit');
    step1(200)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {            console.log(`result is ${result}ms`);            console.timeEnd("submit");
        });
}

submit();

async function implementation:

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t) {    console.log(`step1 in ${t}ms`);    return ajax(t);
}function step2(t) {    console.log(`step2 in ${t}ms`);    return ajax(t);
}function step3(t) {    console.log(`step3 in ${t}ms`);    return ajax(t);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t2);    const result = await step3(t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

Result output:

step1 in 200ms
step2 in 400ms
step3 in 600ms
result is 800submit: 1209.85107421875ms

And if the requirements change, the parameters of each step After all are the results of the previous steps, the async function can be written as:

function ajax(t) {    return new Promise(resolve => {
        setTimeout(() => resolve(t + 200), t);
    });
}function step1(t1) {    console.log(`step1 in ${t1}ms`);    return ajax(t1);
}function step2(t1, t2) {    console.log(`step2 in ${t1}ms,${t2}ms`);    return ajax(t1 + t2);
}function step3(t1, t2, t3) {    console.log(`step3 in ${t1}ms,${t2}ms,${t3}ms`);    return ajax(t1 + t2 + t3);
}async function submit(){    console.time('submit');    const t1 = 200;    const t2 = await step1(t1);    const t3 = await step2(t1, t2);    const result = await step3(t1, t2, t3);    console.log(`result is ${result}`);    console.timeEnd('submit');
}
submit();

Result output:

step1 in 200ms
step2 in 200ms,400ms
step3 in 200ms,400ms,800ms
result is 1600submit: 2210.47998046875ms

async/await Notes

async can be used to declare the content of the package inside Executed in a synchronous manner, await controls the execution sequence. Each await is executed, blocking code execution, waiting for the await return value, and then executing the subsequent await.

The function called after await needs to return a promise.

await can only be used in async functions. If used in ordinary functions, an error will be reported.

The Promise object behind the await command may result in rejected, so it is best to place the await command in the try...catch code block.

async/await try/catch writing method

async function asyncAwait() {    try {        await promise();
    } catch (err) {        console.log(err);
    }
}// 另一种写法async function asyncAwait() {    await promise().catch(function (err){        console.log(err);
    });
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of Mixins.js usage in React.js

CSS usage in React.js

The above is the detailed content of async/await in JS. For more information, please follow other related articles on the PHP Chinese website!