If the Axios request fails, how to get the status code and error information returned by the interface? How to encapsulate the function to handle the common error code?

The method is as follows

1. Use the object to map the status code to the corresponding prompt

const codeMessage = {
    200: 'The server successfully returned the requested data.' ,
    201: 'New or modified data was successful.' ,
    202: 'A request has been queued in the background (asynchronous task).' ,
    204: 'Deleting data was successful.' ,
    400: 'There was an error in the outgoing request, the server did not perform a new or modified data operation.' ,
    401: 'The user does not have permission (wrong token, username, password).' ,
    403: 'The user is authorized, but access is forbidden.' ,
    404: 'The request was sent for a record that does not exist and the server did not perform the operation.' ,
    406: 'The format of the request was not available.' ,
    410: 'The requested resource was permanently deleted and will not be available again.' ,
    422: 'A validation error occurred when an object was created.' ,
    500: 'An error occurred on the server, please check the server.' ,
    502: 'Gateway error.' ,
    503: 'Service is not available, the server is temporarily overloaded or under maintenance.' ,
    504: 'Gateway timeout.',
};

2. Encapsulate the common error request function

function errorHandle(error) {
    if (error.response) {
        // The request was made and the server responded with a status code 
        // The request has been sent and the server responds with a status code
        // that falls out of the range of 2xx out of the range of 2xx
        const { status } = error.response;
        if(status){
            const errorText = codeMessage[status]
            // notification is an Ant Design Anthem component and needs to be replaced with a self-defined component
            notification.error({
                message: `Error code ${status}`,
                description: `${
                    errorText
                }`,
                duration: 2.5
            });
        }
    } else {
        notification.error({
            message: 'request error!',
            description: '',
            duration: 2.5
        });
    }
}

3. Use error request function in common request response interceptor (recommended)

axios.interceptors.response.use(
function(){
	// Interface access success public interceptor
},
function(error){
	// Interface access failure public interceptor
	errorHandle(error)
})

4. Using the wrong request function in a request (not recommended)

axios.get('api/xxxx').then(res => {
	console.log(res); // The request succeeds in returning data
}).catch(errorHandle); // errorHandle is a wrapped public callback

5. The error parameter in Axios catch contains
error.response
error.response.headers
error.response.status //Status code error.response.data
error.request
error.message
error.config
Wait a minute…