preface

There are many times in our business requests that we strategically address requirements of varying duration. This requirement is expanded in detail here.

In this case, our timout is usually based on the request address, so the core handling technique is how to set different timeouts according to different request addresses.

We set the request duration to 10 seconds and pass through the create section, with only one instance for the entire project.

let _axios = axios.create({
  baseURL: apiProxyUrl,
  headers: { 'Content-Type': 'application/json' },
  transformRequest: [transformRequest],
  timeout: 10000 
})
Copy the code

Since we need to deal with the address part of the request, I suggest maintaining a separate file for the long address, considering the following two points:

1 When the number of request addresses increases, better location and maintenance can be achieved. 2 If necessary, further management and configuration can be carried out for different micro-services. 3 Decouple the following policy part of the request durationCopy the code

The main result is to return an array of expected long-duration addresses.

/** * @author Robin * @Description Maintain all long time API Request paths */ ** ** Const userApiPaths = */ const getTablesApiPaths = ()=>{*/ const getTablesApiPaths = ()=>{return[]}export default [
    '/house/list/houseSpaceInHouseSpaceManager'
].concat(userApiPaths).concat(getTablesApiPaths())
Copy the code

Simple processing

We know that AXIos’s own Request supports the configuration of interceptors, so we can do the following simple setup.

import longTimeApiEnum from './longTimeApiEnum'/ / request interceptor _axios. Interceptors. Request. Use ((config) = > {/ / request const 10 minutes long LONG_TIMEOUT = 600000if (longTimeApiEnum.some(url => config.url.includes(url))) {
    config.timeout = LONG_TIMEOUT
  }
  return config
})
Copy the code

This method is suitable for most of the request address is not regular, suitable for using enumeration to maintain the corresponding address.

Policy pattern processing

Of course, if you have a long API address with regular matching, you can also write it in regular, and use the policy pattern to separate the judging part into a method, or even a file.

Take the following example:

// Judge by the micro service level 1 addressfunction judgeIsLongTimeApi(url){
  const strategy = {
      'user':function(url){
          if(url.includes('/users/data')) return true;
          return false
      },
      'table':function(url){
          if(url.includes('/table')) return true;
          return false
      }
  }

    const firstPath = url.split('/') [1];returnstrategy[firstPath] && strategy[firstPath](url); } // use const LONG_TIMEOUT = 600000if (judgeIsLongTimeApi(config.url)) {
    config.timeout = LONG_TIMEOUT
  }
Copy the code

Complex class processing

I feel that the above method is not enough, or sometimes it is not so simple to change a timeout, but also need to change many configurations, such as baseUrl and so on. So you need to define a class. Then customize each subclass according to your needs. Something like this: Class inheritance is used here.

import axios from 'axios';
class Api{
    constructor(){
        
    }
    nessaryFn(){
        throw Error('Functions that must be implemented')
    }
    
    
}

class usualApi extends Api {
    constructor(){
        
    }
    nessaryFn(){
       //codes here
    }
}

class specialApi extends Api {
    constructor(){
        
    }
    nessaryFn(){//codes here}} // Return different API implementation subclasses depending on the situation.Copy the code

summary

The above is all the thinking and practice on axiOS part of the custom maintenance, has completely solved their own needs.

Other problems

  • The same goes for axios when the request return type is non-JSON and requires special configuration for urls. 
    if (exportXlsEnum.some(url  =>  config.url.includes(url))) {
config.responseType  =  'blob'
}
Copy the code