What is the usage of await in vue?

In vue, await means waiting. The await keyword can only be placed in async functions. Use of await with async is equivalent to turning an asynchronous function into a synchronization. await will wait for the following expression. The next step is executed only after the result is returned.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the usage of await in vue

Let’s talk about the usage of async first. It is placed in front of the function as a keyword to indicate that the function is an asynchronous function, because async means asynchronous , an asynchronous function means that the execution of the function will not block the execution of the following code. Write an async function

async function timeout() {
　　return 'hello world';
}

The syntax is very simple. Just add the async keyword in front of the function to indicate that it is asynchronous. How to call it? The async function is also a function. We can use it how we usually use the function. Just call it directly with parentheses. In order to show that it does not block the execution of the code behind it, we add the sentence

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

after the async function call. Open In the browser console, we see

The async function timeout is called, but there is no output. It should not return 'hello world'. Don't worry, take a look at what the timeout() execution returns? Change the timeout() statement above to console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

Continue to look at the console

It turns out that the async function returns a Promise object, if we want to get the promise return value, we should use the then method and continue to modify the code

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

Look at the console

## We get "hello world', At the same time, the execution of timeout does not block the execution of the following code, which is consistent with what we just said.

At this time, you may notice that the Promise in the console has a resolved, which is the internal implementation of the async function Principle. If there is a value returned in the async function, when the function is called, the Promise.solve() method will be called internally to convert it into a promise object as a return, but what if an error is thrown internally in the timeout function? Then it will be called Promise.reject() returns a promise object, then modify the timeout function

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

The console is as follows:

If an error is thrown inside the function, promise The object has a catch method for capturing.

timeout(false).catch(err => {
    console.log(err)
})

The async keyword is almost there, let’s consider the await keyword again. await means waiting, so what does it wait for, and what follows it? In fact, it can be followed by Put any expression, but we are more likely to put an expression that returns a promise object. Note that the await keyword can only be placed in the async function

Now write a function and let it return the promise object. This function The function is to multiply the value by 2 after 2s

// 2s 之后返回双倍的值

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

Now write an async function so that you can use the await keyword. What is placed after await is an expression that returns the promise object, so you can write after it DoubleAfter2seconds function call

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

Open the console, and after 2 seconds, 60 is output.

Now let’s look at the execution process of the code, calling the testResult function, which encounters await, await representation, etc. After a while, the code pauses here and no longer executes downwards. What is it waiting for? Wait for the subsequent promise object to complete execution, then get the value of promise resolve and return. After getting the return value, it continues to execute downwards. . Specific to our code, after encountering await, the code pauses execution and waits for doubleAfter2seconds(30) to complete execution. The promise returned by doubleAfter2seconds(30) begins to execute. After 2 seconds, the promise resolves and returns a value of 60. This At this time, await gets the return value 60, and then assigns it to result. After the pause ends, the code begins to continue execution and executes the console.log statement.

With this function, we may not see the role of async/await. What if we want to calculate the values ​​of 3 numbers and then output the obtained values?

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

After 6 seconds, the console outputs 220. We can see that writing asynchronous code is just like writing synchronous code, and there is no callback area anymore.

Note:

async and await are based on promise. Functions using async will always return a promise object. It's important to remember that this may be a common place for you to make mistakes.

When using await we pause the function, not the entire code.

async and await are non-blocking.

You can still use Promise such as Promise.all().

[Related recommendations: "

vue.js Tutorial"]

The above is the detailed content of What is the usage of await in vue?. For more information, please follow other related articles on the PHP Chinese website!