Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use vue's await". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use vue's await.

In vue, await means waiting. The await keyword can only be placed in the async function. Using await with async is equivalent to turning the asynchronous function into synchronization. Await will wait for the result of the later expression before performing the next step.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the use of await for vue

Let's start with the use of async, which is placed in front of the function as a keyword to indicate that the function is an asynchronous function, because async means asynchronous, which means that the execution of the function does not block the execution of later code. Write an async function

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

The syntax is simple: add the async keyword in front of the function to indicate that it is asynchronous, so how to call it? The async function is also a function. We usually use it as we do with the function, just call it in parentheses. In order to show that it does not block the execution of the code behind it, we add a sentence after the async function call.

Console.log;async function timeout () {return 'hello world'} timeout (); console.log (' later, but I'll execute first')

Open the browser console and we see

The async function timeout is called, but there is no output. Shouldn't it return "hello world',". Don't worry, let's see what the timeout () execution returns. Change the above timeout () statement to console.log (timeout ())

Async function timeout () {return 'hello world'} console.log (timeout ()); console.log (' later, but I'll execute first')

Keep looking at the console.

The original async function returns a promise object. If we want to get the promise return value, we should use the then method to continue to modify the code.

Async function timeout () {return 'hello world'} timeout () .then (result = > {console.log (result);}) console.log (' later, but I'll execute first')

Look at the console

We got the hello world', and the execution of the timeout does not block the execution of the later code, as we just said.

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

Async function timeout (flag) {if (flag) {return 'hello world'} else {throw' my god, failure'}} console.log (timeout (true)) / / calls Promise.resolve () to return the promise object. Console.log (timeout (false)); / / calls Promise.reject () to return the promise object.

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

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

The async keyword is almost there. Let's consider the await keyword. Await means to wait, so what does it wait for, and what does it follow? In fact, you can put any expression after it, but we are more likely to put an expression that returns a promise object. Note that the await keyword can only be put in the async function.

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

Return double value function doubleAfter2seconds (num) {return new Promise ((resolve, reject) = > {setTimeout () = > {resolve (2 * num)}, 2000);})} after / / 2s

Now write another async function so that you can use the await keyword. Await is followed by an expression that returns the promise object, so it can be followed by a call to the doubleAfter2seconds function.

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

Open the console, 2 seconds later, output 60.

Now let's look at the execution of the code, call the testResult function, it encounters await, await means wait a minute, the code is paused here, no longer execute down, what is it waiting for? After the later promise object finishes execution, it takes the value of promise resolve and returns it. After the return value is obtained, it continues to execute downwards. Specific to our code, after encountering await, the code pauses execution, waits for doubleAfter2seconds (30) to finish execution and the promise returned by doubleAfter2seconds (30) starts execution. 2 seconds later, promise resolve is completed and a value of 60 is returned. Then await gets the return value of 60, and then assigns a value to result. After the pause ends, the code starts to continue execution and execute the console.log statement.

With this function, we may not see the effect of async/await. What if we want to calculate the values of three numbers and then output the resulting values?

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

Six seconds later, the console outputs 220, and we can see that writing asynchronous code is like writing synchronous code, and there is no callback region anymore.

Note:

Async and await are based on promise. Functions that use async will always return a promise object. This is important to remember that this may be the place where you are prone to make mistakes.

We paused the function instead of the entire code when using await.

Async and await are non-blocking.

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

At this point, I believe you have a deeper understanding of "how to use vue's await". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.