Preface

async Function is actually Generator Functional Grammatical sugar , As for it and Generator What's the difference? 、 What are the advantages 、 Basic usage 、 Semantics, etc. it will be easier to understand the document directly . This article is mainly about , How do we use if there are multiple requests on the homepage async Function processing

One 、 Use async Function to implement multiple requests

because async Function in awat After that, you can return Promise Value of object and original type （ The number 、 String and Boolean , But it will automatically change to immediate resolved Of Promise object ）. So I like to define an object to accept await Returned data , as follows ：

  async initData() {
    const cache = await this.cachePromise;
  }

reflection ： What if there are multiple requests ？ Join multiple await return promise Instance ？ If async An exception inside the function will result in the return Promise The object becomes reject state , Later requests will wait, causing request congestion , So sometimes , We hope that even if the previous asynchronous operation fails , Do not interrupt the subsequent asynchronous operation . At this time, you can await Put it in try...catch Inside the structure , So whether or not the asynchronous operation succeeds , Back await It will be carried out .

 async initData() {
    const cache = await this.cachePromise;  //  Something went wrong 
    const cache2 = await this.cachePromise2;  // Don't execute 
    const cache3 = await this.cachePromise3;  // Don't execute 
    const cache4 = await this.cachePromise4;  // Don't execute 
  }

//  After modification 
 async initData() {
    try {
       const cache = await this.cachePromise;  //  Something went wrong 
       const cache2 = await this.cachePromise2;  // perform 
       const cache3 = await this.cachePromise3;  // perform 
       const cache4 = await this.cachePromise4;  // perform 
     } catch(err) {
       console.log(err)
     }
  }
    

Two 、 Use async Function to realize the concurrency of multiple requests

1. reflection

From the above code, we have to think about another problem , because cachePromise、cachePromise2、cachePromise3、cachePromise4 Asynchronous requests are independent of each other , But the above writing is followed by a request to wait await The next request will not begin until the request ends , It's time consuming .

2. Solution

adopt Promise.all Implement concurrent requests , They also trigger shortening the execution time of the program .

The code is as follows （ Example ）：

Be careful ：await Must be on async In the function

    //  Writing a 
    let [cache, cache2] = await Promise.all([this.cachePromise,  this.cachePromise2]);
    //  Write two 
    let p= this.cachePromise();
    let p2= this.cachePromise2();
    let cache= await p;
    let cache2= await p2;

Reference resources ：ES6 async function _w3cschool

summary

Sometimes it is not necessary to handle multiple request concurrency async Functions don't use async Just then Callback , It mainly depends on personal habits . I think the use of async Function is very convenient. It can directly request the return data , It's very delicious to be able to do prompt processing for some form submissions . I have a chicken dish, please give me more advice