axios solution to high concurrency: axios. all of and axios. spread of operation

Foreword:

Most of the time, we may need to call multiple background interfaces at the same time, which will lead to high concurrency. 1. Solve this problem:

axios. all and axios. spread

*** Pay attention to the $get Is encapsulated axios Method 
// Method 1 : 
searchTopic() {
 return this.$axios({
       url:' Address 1',
       method:' Mode ',//get/post/patch/put/deleted
       params:{// Parameter get So use params . post.put Use data
       }
      })
}
 // Method 2 : 
searchs(){
     return this.$axios({
       url:' Address 1',
       method:' Mode ',//get/post/patch/put/deleted
       params:{// Parameter get So use params . post.put Use data
       }
      })
     },
 
axios.all([searchTopic(), searchs()])
 .then(axios.spread(function (allSearchTopic, allSearchs) {
  debugger// Print can get all the return values 
  allSearchTopic ==  Method 1 Return value of 
  allSearchs ==  Method 2 Return value of 
 }));

Additional knowledge: axios. all and Promise. all perform other operations after merging multiple requests and returning data

Most of the time, we need to make multiple requests to the backend at the same time, and then do one more operation after all the requests return data.

For example, when initializing a page, you may need to initialize some basic data before you can operate.

To obtain this basic data, you may need to send request1 and request2 to the backend. . .

Such as multiple requests, and subsequent operations need request1, request2, etc. to return data correctly before they can be carried out.

Examples of multiple requests for one-time concurrency in axios official documents are as follows:

function getUserAccount(){
 return axios.get('/user/12345');
}
function getUserPermissions(){
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
 .then(axios.spread(function(acct,perms){
  // This function is triggered when both requests are completed, and the two parameters represent the returned result 
 }))

But most of the time, we don't go directly to axios. get in the project. axios requests may all be placed in one file, and interceptors are added to them. Examples are as follows:

export const cargoDayNumber = (data) => {
 return axios.request({
  url: '/api/zz-xt/statistical/areas',
  method: 'post',
  data: data
 })
}

Used in the vue file as follows:

let r1 = carVisitTime({ createTime: '2019-06-27' })
   let r2 = statistic({ createTime: '2019-06-27' })
   let r3 = cargoDayNumber({ createTime: '2019-07-01' })
   let r4 = enterpriseRanking()
   axios.all([r1, r2, r3, r4]).then(
    axios.spread((r1, r2, r3, r4) => {
     
     this.numberVehicleVisits = r1.data      
     this.loadingDateRank.loading = r2.data.loading
     this.loadingDateRank.unloading = r2.data.unloading 
     
     this.loadingAreasRank.loadingRegionalList = r3.data.inflow
     this.loadingAreasRank.unloadingRegionalList = r3.data.outflow 
   
     this.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRank
     this.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank
    })
   )

In addition to axios. all, we can also use Promise. all, as shown below

 Promise.all([p1, p2]).then(function(values) {
    console.log(values);//values For 1 Array of numbers 
    /// Carry on your next step 1 Step operation 
   });