Async Asynchronous functions are not fully used

preface

Now that the year 8102 is drawing TO a close, the VueConf TO 2018 conference has announced plans for Vue 3.0. We often use Vue to write projects in our daily lives. Then there’s the ES6. Then again, can you really use ES6 async asynchronous functions?

1. Async introduction

MDN introduction: developer.mozilla.org/zh-CN/docs/…

Async function is used to declare an asynchronous function that returns an AsyncFunction object. An asynchronous function is a function whose value is executed asynchronously through an event loop that returns its result via an implicit Promise. If your code uses asynchronous functions, the syntax and structure are more like standard synchronous functions

The async keyword is used to indicate that there are asynchronous operations in a function. It returns the result by returning a Promise object. Its biggest feature is that it will operate asynchronously with async/await, but with the same writing and structure as we normally write (synchronous code)

2, demonstration

// Generally we define all request methods in a file. Here we define a method to simulate our daily requestfunction fetch() {
    axios.get('/user? ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function(error) { console.log(error); }); }; // Then call it async where it is neededfunction getUserInfo() {
    const info = await fetch();

    return info;
}
getUserInfo().then(info => console.log(info));

Copy the code

As we can see, the whole process is very intuitive and clear, the statement semantics are very clear, and the whole asynchronous operation looks like synchronization. If there is no problem after looking at the above process, then we will continue to have a deeper understanding.

3. Combination of async Promise setTimeout(timer

Next to show you a topic, this topic is I was a certain interview question, and many people have seen, this topic is very classic and the use of scene page is very much, the research significance is very great, so I will share it with you here.

Find the following output:
async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')
Copy the code

There are eight log statements. Before copying them to the console, you will have 20 seconds to memorize the output order.

1.. 2.. . . 20

Let me give you the correct answer:

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout
Copy the code

If your answer is different from the correct one above, then you still don’t understand async/await very well. Hopefully you will be able to face all kinds of async/await problems after reading this article.

Let’s review MDN’s description of async/await:

When an async function is called, a Promise object is returned. When the async function returns a value, the Promise’s resolve method takes care of passing the value; When async throws an exception, Promise’s Reject method also passes the exception.

Async functions may have await expressions, which cause the async function to pause, wait for the Promise result, and then resume the async function and return resolved.

The purpose of async/await is to simplify the operation of making asynchronous calls with Promises and to perform certain operations on a set of Promises. Just as Promises are like structured callbacks, async/await is like combination generators and Promises.

await

The await operator is used to wait for a Promise object. It can only be used in async function.

[return_value] = await expression;
Copy the code

Await expression suspends execution of the current async function until the Promise processing completes. If the Promise is fulfilled normally, the resolve function parameter of its callback will be the value of the await expression and the async function will continue to be executed.

If a Promise handles an exception (Rejected), the await expression throws the Promise’s exception reason.

Also, if the value of the expression after the await operator is not a Promise, the value itself is returned.

One of the most important sentences is: The async function will be suspended when an await expression is encountered and will resume execution after the await statement (resolved or Rejected) changes its state. And returns the parse value (the Promise value)

This much Promise stuff is because async/await is built on Promise

And then when you look back at our problem, you see, something’s wrong

async1 end
promise2
Copy the code

That’s because there’s a Promise. Resolve point that I didn’t consider, and that’s where I got stuck

4. Analysis process

  1. Define an asynchronous function async1
  2. Define an asynchronous function async2
  3. Print ‘script start’ // *1
  4. Define a timer (macro task, priority lower than micro task) to output after 0ms
  5. Execute asynchronous function async1
    1. Print ‘async1 start’ // *2
    2. When an await expression is encountered, async2 after await is executed
      1. Print ‘async2’ // *3
    3. Returns a Promise out of the async1 body
  6. Execute the statement in new Promise
    1. Print ‘promise1’ // *4
    2. Resolve (), returns a Promise object, and pushes the Promise into the queue
  7. Print ‘script end’ // *5
  8. The synchronization stack is complete
  9. Back in async1, async2 does not return a Promise, so resolve, the value of async2, is queued
  10. Execute. Then after new Promise, print ‘promise2’ // *6
  11. Back in the body of async1, await returns promise.resolve (), and prints the following ‘async1 end’ // *7
  12. Finally execute timer (macro task) setTimeout, print ‘setTimeout’ // *8

My process analysis of this code looks something like this (please point out if there are any misinterpretations). Here are the key points that you can easily understand: Many people think that await is waiting for an expression to complete before executing the following code. In fact, await is to execute the following expression first, then return a Promise, and then jump out of the whole async function to execute the following code. There will be an operation to relinquish the thread. After the async station is finished, the async function will return to await the return value of the await expression. If it is not a Promise object, a procedure will expect it to resolve into a Promise object, and then continue to execute the code following the async function. Until it is a Promise object, the Promise object is placed in the Promise queue.

So this is the difficulty with ‘async1 end’ and’ promise2 ‘that will fail if you don’t pay attention

So now that we have a general understanding of async/await, let’s change the problem and let’s change async2

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')}function async2(){// remove async keyword console.log()'async2');
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')
Copy the code

Can you get it right this time

5. Common daily examples

I wrote all of this just to make it easier for you to understand asynchronous functions,

Here are some examples of how we use asynchronous functions in our daily development. In general, we have a business that needs to be separated, where each step is asynchronous and heavily dependent on the result of the previous step, and the next step is callback hell, in which case we can use async/await

For example, in this scenario, we commit data to determine whether the user has the permission, and then proceed to the next action asyncfunctionsubmitData(data) { const res = await getAuth(); // Obtain the authorization statusif (res....) {
        const data = await submit(data);
    }
    toast(data.message);
}
Copy the code

This ensures the sequence of the two operations

Or in Vue, some initialization

async created() { const res = await this.init(); Const list = await this.getPage(); // paging requests, etc.}Copy the code

But in the process of using it, we find that as soon as we get out of callback hell, we fall into async/await hell

Here’s an example:

async created() { const userInfo = await this.getUserInfo(); Const list = await this.getnewslist (); // Get user data const list = await this.getnewslist (); // Get article data}Copy the code

On the surface, the grammar is correct, but it is not a good implementation, because it put the two order without a forced into synchronous operation, because the code is a line and a line, think about it, we don’t need to after get the user data to obtain the article data, their work can be simultaneously

Here are some examples of common concurrent execution

async created() { const userInfo = this.getUserInfo(); // They both return a Promise object const list = this.getNewslist (); await userInfo; await list; / /... Do something} // Use Promise if there are many requests. All asynccreated() { Promise.all([this.getUserInfo(), this.getNewsList()]).then(()=> { // ... do something }); }Copy the code

5, legend

6, summary

1. The ultimate asynchronous solution

2. Asynchronous operations that look like synchronization

3. Easy error capture and debugging

4. Support concurrent execution

Know to avoid async/await hell

7. Write at the end

Ok, so much for the incomplete guide to async asynchronous functions. The above mentioned content may be relatively superficial. It is recommended that we skillfully use it, in daily development more use more summary will have precipitation effect, is to rely on their own practice, in order to be familiar with the use, practice makes perfect!

Finally, if you think I have written wrong, bad writing, other suggestions (praise), you are very welcome to supplement. I hope we can exchange opinions, learn from each other and make progress together! I am a 19-year-old fresh student, the above is today’s share, the novice on the road, the follow-up irregular week (or month more haha), I will try to make myself more excellent, write better articles, there is something wrong in the article, please kindly correct. If you found this article helpful, please give it a thumbs up or leave a comment.