Preface
In react project, when interacting with the background to obtain data, we usually use the axios library, which is a promise-based http library that can be run on the browser side and in the browser. It has many excellent features, such as intercepting requests and responses, canceling requests, converting json, client defense XSRF, etc. If you still don't know anything about axios, you can moveaxios documentation。
Install
//Use npm to installnpm install axios; //Use yarn to installyarn add axios
Introduced
In the project root directory, create a new request folder, and then create a new and a file in it. Files are used to encapsulate our axios and to manage our interfaces in a unified manner.
//Introduce axios inimport axios from 'axios';
//Introduce the qs module to serialize post-type dataimport QS from 'qs';
//Antd's message prompt component, you can change it according to your ui component.import { message } from 'antd'
Switching environment
Our project environments may include a development environment, a test environment, and a production environment. We match our default interface url prefix through node's environment variables. Here we need the global variable process of node, .NODE_ENV can distinguish whether it is a development environment or a production environment.
//Save environment variablesconst isPrd = .NODE_ENV == 'production'; //Distinguish between development environment or production environment basic URLexport const basciUrl = isPrd ? '' : ''
The basic URL is exported here to prevent different resources from being used in other places. It is necessary to distinguish between production environments and development environments, and it can be used directly after importing.
Request for interception
We can intercept a request before sending a request. Why do we intercept the request? What are we used to intercept the request? For example, some requests require the user to log in before accessing, or when posting, we need to serialize the data we submitted. At this time, we can perform an intercept before the request is sent to perform the operation we want.
//Set the basic path of axiosconst service = ({
baseURL: basicUrl
})
// Request an interceptor(config => {
// Whether tokens exist in the local storage before each request is sent, you can also use Redux to only demonstrate getting tokens locally // If it exists, add tokens to the header requested by http, so that the background judges your login situation based on the token // Even if there is a token locally, it is possible that the token is expired, so the return status must be judged in the response interceptor const token = ('userToken') || ('userToken');
//Add token in each request = ({}, , {
token: token,
})
//Set request header = {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
= ()
return config
}, error => {
return error;
})
Let’s talk about tokens here. Generally, after login is completed, the user’s token is stored locally through localStorage or sessionStorage. Then, every time the user enters the page (that is, in), he will first read the token from the local storage. If the token exists, it means that the user has logged in, and update the token status in Redux. Then, every time you request an interface, you will carry a token in the requested header. The backend staff can judge whether your login has expired based on the token you carry. If you don’t carry it, it means you have not logged in.
Response to intercept
// Response Interceptor(response => {
//Do different things according to the return of different status codes // Here you must negotiate a unified error status code with the backend developer if () {
switch () {
case 200:
return ;
case 401:
//No login processing method break;
case 403:
//Token expiration processing method break;
default:
()
}
} else {
return response;
}
})
//Finally export the encapsulated axiosexport default service
The response interceptor is easy to understand, which means the data returned to us by the server, and we can process it some time before we get it. For example, the above idea: If the status code returned by the background is 200, the data will be returned normally. Otherwise, some errors we need will be made according to the wrong status code type. The specific returned status code needs to be processed and the process needs to be negotiated with the background developers.
The antd library prompt component I introduced in the above () method needs to use the prompt component according to your UI library.
Unified management of API
A neat API is like a circuit board, and even the most complex one can clearly define the entire line. As mentioned above, we will create a new one and then store all our API interfaces in this file.
First we introduce our encapsulated axios in
//Import our encapsulated axiosimport service from './index'
Now, for example, we have such an interface, which is a post request:
/api/v1/articleEdit
We can encapsulate it like this:
export const apiArticleEdit = info => ('/api/v1/articleEdit', info);
We define an apiArticleEdit method, which has a parameter info, which is the parameter object that we carry when requesting the interface. Then we call the axios method we encapsulated. 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 in our page, we can call our API interface like this:
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: 'Beigu Qing Tea' }
apiArticleEdit(params).then(res => {
// Other operations after successful data acquisition //.....
(res)
})
}
render() {
return (
<div>
</div>
)
}
}
For other API interfaces, continue to expand below. Friendly reminder, write comments for each interface! ! !
One advantage of API interface management is that we unify the API. If the interface needs to be modified later, we just need to find the corresponding modifications in it, without having to search for our interface on each page and then modify it will be very troublesome. The key is, if the number of modifications is relatively large. Also, if we modify the interface directly in our business code, it is easy to cause unnecessary trouble if we accidentally move our business code.
OK, finally, the finished axios package code is presented.
//Introduce axios inimport axios from 'axios';
//Introduce the qs module to serialize post-type dataimport QS from 'qs';
//Antd's message prompt component, you can change it according to your ui component.import { message } from 'antd'
//Save environment variablesconst isPrd = .NODE_ENV == 'production';
//Distinguish between development environment or production environment basic URLexport const basciUrl = isPrd ? '' : ''
//Set the basic path of axiosconst service = ({
baseURL: basicUrl
})
// Request an interceptor(config => {
// Whether tokens exist in the local storage before each request is sent, you can also use Redux to only demonstrate getting tokens locally // If it exists, add tokens to the header requested by http, so that the background judges your login situation based on the token // Even if there is a token locally, it is possible that the token is expired, so the return status must be judged in the response interceptor const token = ('userToken') || ('userToken');
//Add token in each request = ({}, , {
token: token,
})
//Set request header = {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
//Serialize the request parameters, otherwise the post request parameters will be received in the background. = ()
return config
}, error => {
return error;
})
// Response Interceptor(response => {
//Do different things according to the return of different status codes // Here you must negotiate a unified error status code with the backend developer if () {
switch () {
case 200:
return ;
case 401:
//No login processing method break;
case 403:
//Token expiration processing method break;
default:
()
}
} else {
return response;
}
})
//Finally export the encapsulated axiosexport default service
Summarize
This is the article about axios encapsulation and API interface management in React project. For more related content on axios encapsulation and API interface in React, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!