Detailed explanation of axios encapsulation and API interface management in React project

Preface
Install
Introduction
Switching environments
Request interception
Response Interception
Unified management of APIs
Summarize

Preface

In the react project, we usually use the axios library to interact with the background to obtain data. It is a promise-based http library that can run on the browser and node.js. It has many excellent features, such as intercepting requests and responses, canceling requests, converting JSON, and defending against XSRF on the client side. If you still don't know about axios, you can move to the axios documentation.

Install

//Install using npm npm install axios; 
//Use yarn to install yarn add axios

Introduction

In the project root directory, create a request folder, and then create an index.js and an api.js file in it. The index.js file is used to encapsulate our axios, and api.js is used to uniformly manage our interfaces.

//Introduce axios in index.js
import axios from 'axios';
//Introduce the qs module to serialize post type data import QS from 'qs';
//Antd's message prompt component, you can change it according to your own UI component.
import { message } from 'antd'

Switching environments

Our project environment may include development environment, test environment and production environment. We use node's environment variables to match our default interface url prefix. The global variable process of node is needed here, process.env.NODE_ENV can distinguish whether it is a development environment or a production environment.

//Save environment variables const isPrd = process.env.NODE_ENV == 'production';

//Distinguish between development environment and production environment base URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

The base URL is exported here to prevent different resources from being used elsewhere. It is necessary to distinguish between the production environment and the development environment. It can be used directly after importing.

Request interception

We can intercept a request before sending it. Why do we need to intercept it? What do we intercept the request for? For example, some requests require users to log in before they can access them, or when making a post request, we need to serialize the data we submit. At this time, we can intercept the request before it is sent and perform the operations we want.

//Set the axios base path const service = axios.create({
  baseURL: basicUrl
})
// Request interceptor service.interceptors.request.use(config => { 
  // Check whether there is a token in the local storage before sending each request. You can also use Redux here to only demonstrate how to get the token locally.
  // If it exists, add the token to the header of the http request, so that the backend can determine your login status based on the token. // Even if the token exists locally, it is possible that the token is expired, so the return status must be determined in the response interceptor const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //Add token to each request
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //Set the request header config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

Let's talk about token here. Generally, after the login is completed, the user's token is stored locally through localStorage or sessionStorage. Then, each time the user enters the page (that is, in main.js), the token will be read from the local storage first. If the token exists, it means that the user has logged in, then the token status in Redux will be updated. Then, each time you request the interface, you will carry the token in the request header. The backend staff can determine whether your login has expired based on the token you carry. If you do not carry it, it means you have never logged in.

Response Interception

// Response interceptor service.interceptors.response.use(response => {
  //Do different things based on the returned status code// Be sure to negotiate with the backend developers on a unified error status code if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //Unlogged in processing method break;
      case 403:
        //Token expiration processing method break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//Finally, export the encapsulated axios export default service

The response interceptor is easy to understand. It is the data returned by the server to us, and we can do some processing on it before getting it. For example, the idea above is: if the status code returned by the background is 200, then the data is returned normally, otherwise some errors we need will be processed according to the wrong status code type. The specific processes that need to be handled according to the returned status code need to be negotiated with the background developers.

The message.error() method above is the library prompt component of antd that I introduced. You need to use the prompt component according to your UI library.

Unified management of APIs

A neat API is like a circuit board, which makes the entire circuit clear no matter how complex it is. As mentioned above, we will create a new api.js and store all our api interfaces in this file.

First, we introduce our encapsulated axios in api.js

//Import our packaged axios 
import service from './index'

Now, for example, we have such an interface, which is a post request:

http://www.development.com/api/v1/articleEdit

We can encapsulate it in api.js like this:

export const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);

We define an apiArticleEdit method, which has a parameter info, which is the parameter object we carry when requesting the interface. Then we call our encapsulated axios method. The first parameter is our interface address, and the second parameter is the info parameter of apiArticleEdit, which is the parameter object carried when requesting the interface. Finally, export apiArticleEdit through export.

Then we can call our API interface like this in our page:

import React, { Component } from 'react'
 import { apiArticleEdit } from './request/api'
export default class App extends Component {
  componentDidMount() { 
    // Call the API interface and provide two parameters let params = { type: 2, author: '北孤清茶' }
    apiArticleEdit(params).then(res => { 
      //Other operations after successfully obtaining data//.....
      console.log(res)
    })
  }
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

For other API interfaces, just continue to expand in api.js. Friendly reminder, write comments for each interface! ! !

One benefit of API interface management is that we centralize the APIs. If we need to modify the interface later, we can directly find the corresponding modification in api.js, instead of going to each page to find our interface and then modify it, which would be very troublesome. The key is, what if the amount of modification is large. In addition, if we modify the interface directly in our business code, it is easy to accidentally move our business code and cause unnecessary trouble.

Okay, finally, here is the completed axios encapsulation code.

//Introduce axios in index.js
import axios from 'axios';
//Introduce the qs module to serialize post type data import QS from 'qs';
//Antd's message prompt component, you can change it according to your own UI component.
import { message } from 'antd'

//Save environment variables const isPrd = process.env.NODE_ENV == 'production';

//Distinguish between development environment and production environment base URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

//Set the axios base path const service = axios.create({
  baseURL: basicUrl
})

// Request interceptor service.interceptors.request.use(config => { 
  // Check whether there is a token in the local storage before sending each request. You can also use Redux here to only demonstrate how to get the token locally.
  // If it exists, add the token to the header of the http request, so that the backend can determine your login status based on the token. // Even if the token exists locally, it is possible that the token is expired, so the return status must be determined in the response interceptor const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('userToken');
  //Add token to each request
  config.data = Object.assign({}, config.data, {
    token: token,
  })
  //Set the request header config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
  //Serialize the request parameters, otherwise the post request parameters will not be received normally by the backend config.data = QS.stringify(config.data)
  return config
}, error => { 
    return error;
})

// Response interceptor service.interceptors.response.use(response => {
  //Do different things based on the returned status code// Be sure to negotiate with the backend developers on a unified error status code if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //Unlogged in processing method break;
      case 403:
        //Token expiration processing method break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//Finally, export the encapsulated axios export default service

Summarize

This is the end of this article about the encapsulation and API interface management of axios in React projects. For more relevant content about axios encapsulation and API interface in React, 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: