The actual process of encapsulating axios in the project

Preface
Benefits of axios encapsulation
Packaging ideas
Configuration precedence
axios instance configuration

1. Define some general configurations
2. Add some operations we need before the request.
3. After the request returns, add an interception operation.

Unified management of request interface methods

Finally, here is a complete example! You can refer to it~

Summarize

Preface

I often encounter axios when studying and doing projects. The projects I did before usually configured axios, so I always had a general impression of it. Recently, I had a chance to manually configure axios, so I recorded and shared it by the way~

Benefits of axios encapsulation

The benefits of axios encapsulation are unified processing, improved efficiency, and easy maintenance.

You can use the axios request interface as follows

axios.get('http://localhost:10086/user?ID=12345')
  .then(response => {
    //Operation after success...
  })
  .catch(error => {
    //Operation after failure...
  });

However, when there are more interface requests and more requirements, writing such code in every place in the project where an interface request is needed will generate a lot of repetitive code, reducing our development efficiency and increasing maintenance costs.

Packaging ideas

We need to configure axios once and for all so that the configuration can adapt to most scenarios of our project. We can create a new js file, create a new axios instance with custom configuration, and then perform basic configuration on the instance, add some processing we need in the stages before the request (request body processing) and after the request (return result processing), and then export it for use.

Configuration precedence

Configurations are merged in a priority order. The order is: the library's defaults found in lib/defaults.js , then the instance's defaults property, and finally the request's config parameter. (In this way, we can also handle some special scenes separately)

lib/defaults.js under the axios library file in the node_modules folder.

Custom instance defaults

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

Requested config parameters

axios({   
method:'get',   
url:'http://bit.ly/2mTM3nY',   
responseType:'stream' }).then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });

axios instance configuration

1. Define some general configurations

Setting BaseUrl

baseUrl is generally divided into multiple addresses such as production, development, and testing. We can create a config.js to store it. If it is vue or react, we can create new env and other files to store it. The following baseUrl uses the environment variables of react.

Set the timeout period for the request
Set the data request format Content-Type (application/x-www-form-urlencoded, multipart/form-data, application/json...), etc.

import axios from 'axios'

export const request = createAxiosInstance()

function createAxiosInstance () {
  const instance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    timeout: 5000,
    headers: {
      // You can define a unified request header post: {
        'Content-Type': 'application/json'
      }
      ...
    }
  })
  return instance
}

2. Add some operations we need before the request.

For example, you need to add a token in the request header

Request parameter empty processing

(The example below passes empty name and personId, which may cause ambiguity. Should we get the parameter value as empty or ignore these parameters? Some backends will do some processing, but the frontend should try to avoid it~)

Enable loading animation effects every time an interface is requested, etc.

  // Add a request interceptor (do something before sending the request)
  instance.interceptors.request.use((config) => {
      //You can add a function to open the loading effect loading.open()  
      //If token exists, add it to the request header token && (config.headers.Authorization = token)
     // Filter null undefined '' function in request parameters cleanObject()
      return config
  })

3. After the request returns, add an interception operation.

Processing successfully returned data

For example, the data returned by the backend may be nested in many layers. You can directly return the data you need, so that the business code can directly get the final data without having to deconstruct it every time.

Unified handling of exceptions after failure

Interface requests may succeed or fail. If you don't want to write the failure logic code every time you write an interface request, and it is almost always repeated, you can centrally perform unified exception handling for the interface here. For example, determine the status code or the backend customized code, and display the error prompt returned by the backend.

 // Add a response interceptor (do something with the response data)
  instance.interceptors.response.use((response) => {
   //You can add a function to close the loading effect loading.close()  
      //Deconstruct the returned result data const res = response.data
      //Judge the custom code and return the successful data const validateStatus = /^(2|3)\d{2}$/ //A code starting with 2 or 3 is considered a successful request if (validateStatus.test(res.code)) {
        return res //directly return the data we need
      }
      //Judge the failed code and make prompts etc. if (res.code === 401) {
        message.error(res.msg)
      } else {
        message.warning(res.msg)
      }
      return Promise.reject(res)
      },
      (error) => {
      loading.close() 
      if (error.response.status === 401) {
        message.error('token expired, please log in again!')
        removeStorageToken()
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else {
        if (!window.navigator.onLine) {
          message.warning('Network abnormality, please check whether the network is connected normally')
        } else if (error.code === 'ECONNABORTED') {
          message.warning('Request timeout')
        } else {
          message.warning('Server abnormality, please contact the administrator')
        }
      }
      return Promise.reject(error) // Return the error to the specific page}
      )

There are some error handling based on HTTP status code and custom code. After the error is intercepted here, there is no need to perform error prompt processing every time the page calls the business interface. Of course, it should be configured according to the needs of different projects.

Unified management of request interface methods

Generally, we will write all the interface request methods together for unified management, which will also facilitate search and maintenance when changes are made later.

We can create a new folder to manage API requests (such as apiList), in which we put various request files (here divided by function). For example, user.js stores user-related requests, and so on. Then the page can directly reference the method to make an interface call.

import { request } from '../axios'

// Get user information export function getUserInfo (userId) {
  return request.get(`/sys/user/info/${userId}`)
}

Just call the method directly in the component or page~

Finally, here is a complete example! You can refer to it~

This example configuration is suitable for vue or react. Of course, the configuration of each project will be slightly different. You should modify and expand it according to your own project.

import axios from 'axios'

export const request = createAxiosInstance()

function createAxiosInstance () {
  const instance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    timeout: 5000,
    headers: {
      // You can define a unified request header post: {
        'Content-Type': 'application/json'
      }
      ...
    }
  })
   // Add a request interceptor (do something before sending the request)
  instance.interceptors.request.use((config) => {
      //You can add a function to open the loading effect loading.open()  
      //If token exists, add it to the request header token && (config.headers.Authorization = token)
     // Filter null undefined '' function in request parameters cleanObject()
      return config
  })
  // Add a response interceptor (do something with the response data)
  instance.interceptors.response.use((response) => {
   //You can add a function to close the loading effect loading.close()  
      //Deconstruct the returned result data const res = response.data
      //Judge the custom code and return the successful data const validateStatus = /^(2|3)\d{2}$/ //A code starting with 2 or 3 is considered a successful request if (validateStatus.test(res.code)) {
        return res
      }
      //Judge the failed code and make prompts etc. if (res.code === 401) {
        message.error(res.msg)
      } else {
        message.warning(res.msg)
      }
      return Promise.reject(res)
      },
      (error) => {
      loading.close() //You can add a function to close the loading effect if (error.response.status === 401) {
        message.error('token expired, please log in again!')
        removeStorageToken()
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else {
        if (!window.navigator.onLine) {
          message.warning('Network abnormality, please check whether the network is connected normally')
        } else if (error.code === 'ECONNABORTED') {
          message.warning('Request timeout')
        } else {
          message.warning('Server abnormality, please contact the administrator')
        }
      }
      return Promise.reject(error) // Return the error to the specific page}
      )
  
  return instance
}

Summarize

This is the end of this article about encapsulating axios in projects. For more information about encapsulating axios in related projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of Vue 2.0 encapsulation axios notes
Example code using axios and encapsulation in vue
Axios encapsulation, using interceptors to uniformly process interfaces, super detailed tutorial (recommended)
Solve the error prompt problem of encapsulated request status of vue axios
Detailed explanation of the encapsulation of axios requests in vue
How to use Axios to encapsulate http requests in Vue projects
An example of secondary encapsulation of axios in vue
Encapsulation implementation of axios under vue+ts
Detailed explanation of the encapsulation example of axios in Vue

<<: Detailed example of MySQL subquery

>>: There is no make command in Linux (make: *** No target specified and no makefile or make command installation method found)