SoFunction
Updated on 2025-04-05

Axios solves high concurrency: Operations with

Preface:

Many times, we may need to call multiple backend interfaces at the same time, which will cause high concurrency. Generally, the solution to this problem:

and

***Pay attention to the$getIt's encapsulatedaxiosmethod
//Method 1:searchTopic() {
 return this.$axios({
       url:'Address 1',
       method:'Way',//get/post/patch/put/deleted
       params:{//System get so use params.  Use data       }
      })
}
 //Method 2:searchs(){
     return this.$axios({
       url:'Address 1',
       method:'Way',//get/post/patch/put/deleted
       params:{//System get so use params.  Use data       }
      })
     },
 
([searchTopic(), searchs()])
 .then((function (allSearchTopic, allSearchs) {
  debugger//Print can get all the return values  allSearchTopic == method一的返回值
  allSearchs == method二的返回值
 }));

Supplementary knowledge:and perform other operations after merging multiple requests and returning data.

Many times, we need to make multiple requests to the backend at the same time, and after all the requests return data, we will perform some operations.

For example: When initializing a page, some basic data may be required to be initialized before operations can be performed.

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

Wait for multiple requests, and subsequent operations say that request1, request2, etc. must return data correctly before proceeding.

Examples of concurrent multiple requests at one time in the official axios documentation are as follows:

function getUserAccount(){
 return ('/user/12345');
}
function getUserPermissions(){
 return ('/user/12345/permissions');
}
([getUserAccount(),getUserPermissions()])
 .then((function(acct,perms){
  //This function will be triggered when both requests are completed. The two parameters represent the returned results respectively }))

But many times, we don't go directly in the project, and the axios request may be placed in a file, and an interceptor is added, etc. Examples are as follows:

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

Use in vue files 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()
   ([r1, r2, r3, r4]).then(
    ((r1, r2, r3, r4) => {
     
      =       
      = 
      =  
     
      = 
      =  
   
      = 
      = 
    })
   )

In addition, we can also use it, the examples are as follows

 ([p1, p2]).then(function(values) {
    (values);//values ​​is an array    ///Perform your next steps   });

The above article Axios's methods to solve high concurrency: () and () operations are all the content I share with you. I hope you can give you a reference and I hope you can support me more.