Preface

In our business requests, there are times when we have strategic settings for different lengths of demand.This requirement is detailed here.

In this case, our timout is usually based on the request address, so the core processing technique is how to set different timeout for different request addresses.

The request time we set up earlier was ten seconds, and through the create section, the entire project had only one instance.

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

Now that you need to process the address portion of the request, I recommend that you maintain a separate file for long addresses, taking into account the following two points:

1 Better positioning and maintenance when more addresses are requested
 2 Further management and configuration of different microservices can be carried out when needed
 3 Decouple with the strategy section for the following request duration

The primary result is an array of expected long-term addresses.

/**
 * @author robin
 * @description maintain all long time api request paths
 */
 
/**
 * User Service Long Address Array
 */
const userApiPaths = [] 

/**
 * Report Service Long Address Array, if your microservice address follows a rule, you can define the method here and return
 */
const getTablesApiPaths = ()=>{
    return []
}

export default [
    '/house/list/houseSpaceInHouseSpaceManager'
].concat(userApiPaths).concat(getTablesApiPaths())

Simple Processing

We know that axios'request supports interceptor configuration, so we can make the following simple settings.

import longTimeApiEnum from './longTimeApiEnum'
// request interceptor
_axios.interceptors.request.use((config) => { 
  // Request Length 10 Minutes
  const LONG_TIMEOUT = 600000 
  if (longTimeApiEnum.some(url => config.url.includes(url))) {
    config.timeout = LONG_TIMEOUT
  }
  return config
})

This method is suitable for most request addresses that are irregular and for enumeration to maintain corresponding addresses.

Policy Mode Processing

Of course, if your long api address has some regular matchability, you can also write it regularly and use the strategy pattern as a separate method, or even a file.

Examples include the following:

// Judging by first-level address of microservice
function 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];
    return strategy[firstPath] && strategy[firstPath](firstPath);
    
}

// Use
const LONG_TIMEOUT = 600000 
  if (judgeIsLongTimeApi(config.url)) {
    config.timeout = LONG_TIMEOUT
  }

Complex class handling

Feel like the way above is not realistic enough, or sometimes it's not so easy to change a timeout, there are still many configurations to change, such as baseUrl and so on.Then you need to define a class.Then customize each subclass according to your needs.Probably 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
    }
}

// Another policy pattern returns the implementation subclasses using different api depending on the situation.

Summary

The above is all about the axios part of the custom time thinking and practice, has completely solved their needs.

Other questions

When data type or return type is not regular

This is also the case when axios'request return type is non-json and the url needs to be specially configured.

Mode 1: Special handling can be done by maintaining critical paths

if (exportXlsEnum.some(url  =>  config.url.includes(url))) {
config.responseType  =  'blob'
}

Mode 2: The way of policy, when conforming to a policy, setting certain configuration parameters and changing the check of returned results, add the name of the incoming policy directly when defining the api method

Mode 3: If you have a large number of interfaces with this feature, you can also directly instantiate an axios instance that supports this configuration, and use it directly when invoking, distinguishing it from a regular axios request instance.

About me

I am a front-end Coder and love to share experiences and experiences in life and technology.
I am a travel enthusiast, and I like to take pictures of scenes and people on the way.
I'm a writing maniac, and I'm basically writing new articles every day.

Personal Site

GitHub: http://github.com/robinson90
codepen: https://codepen.io/robinson90
personal blog: http://damobing.com
yuque docs: https://www.yuque.com/robinson
juejin blog: https://juejin.im/user/5a30ce...

Personal Microsignals and Public Numbers

WeChat: csnikey, or Sweep and Me

Damo Space Subscription Number: damo_kongjian, or scan the following two-dimensional code