Secondary encapsulation based on AXIos

Secondary encapsulation is performed on the basis of AXIOS to facilitate interface invocation and unified management interface

Package content

An instance of AXIos is created first, so no initial values are set for the sake of extension.

const instance = axios.create()
Copy the code

Request interceptor

// Intercept and process the request before it is requested
instance.interceptors.request.use((config) = > {
	// The token returned from the background is generally used as one of the parameters of the request on the project, so this content is uniformly added to the request interceptor
    config.headers['token'] = sessionStorage.getItem('token') | |' ';
    return config
}, error= > {
    console.log(error);
    return Promise.reject(error);
})
Copy the code

Response interceptor

// Intercept and process the request before it is requested
instance.interceptors.response.use(response= > {
	// Process the normal return data with the return status of 200
    if(response.status === '200' || response.status === 200) {
    	// If code is set to 0
        if(! response.data.code) {return Promise.resolve(response.data.data);
        }else {
        	// This is a common setting for my own project (subject to actual conditions)
            if(response.data.code === '1000' || response.data.code === 1000) {
                // 1000 Redirects the login for token invalidity or error
                // The antD message component prompts
                message.error(response.data.message);
                window.location.href('/login');
            }else {
             	// The antD message component prompts
                message.error(response.data.message);
                throw Promise.reject(response.data.message); }}}else {
        message.error(response.data.message);
        return Promise.reject(response.data.message); }},error= > {
    return Promise.reject(error);
})
Copy the code

request

Separate GET request

export const getRequire = (url, params, config ={}) = > {
    return new Promise((resolve, reject) = > {
        instance.get(url, params).then(response= > resolve(response)).catch(error= >reject(error)); })}Copy the code

Separate POST request

export const postRequire = (url, params, config={}) = > {
    return new Promise((resolve, reject) = > {
        instance.post(url, params).then(response= > resolve(response)).catch(error= >reject(error)); })}Copy the code

Integration of the request

You can keep adding special requests, such as PostJSON, formData, etc

export const requireApi = (values, params, config = {}) = > {
	// The default is post request
    const { url = ' ', baseUrl = ' ', type = 'post' } = values;
    let realUrl = baseUrl + url;
    switch(type) {
        case 'post': return new Promise((resolve, reject) = > {
            instance.post(realUrl, params).then(response= > resolve(response)).catch(error= > reject(error));
        })
        case 'get': return new Promise((resolve, reject) = > {
            instance.get(realUrl, { params }).then(response= > resolve(response)).catch(error= > reject(error));
        })
        default:  return new Promise((resolve, reject) = > {
            instance.get(realUrl, { params }).then(response= > resolve(response)).catch(error= >reject(error)); }}})Copy the code

Unified Interface Management

Project baseline request path

You can set several more base request paths if an external project is introduced

const baseUrl = '/test'
Copy the code

Request interface in project

// Here is an example
export const apis = {
    / / < -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- login page -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
    // Test whether the server connection is normal
    testConnect: { baseUrl: baseUrl, url: '/data/testConnect'.type: 'get' },
    / / access token
    getToken: { baseUrl: baseUrl, url: '/data/getToken'.type: 'get'}},Copy the code

Method of use

Request the interface to access the data on the page

/ / no parameters
requireApi(apis.testConnect).then(() = > {
	console.log('Server communication normal');
}).catch(error= > {
    console.log('Communication on the server is abnormal);
})
// Take arguments and return values
requireApi(apis.getUserToken, params).then(value= > {
	console.log(value);
}).catch(err= > {
	console.log('Request exception');
})
Copy the code