This is the fifth day of my participation in Gwen Challenge

Interceptors are divided into request interceptor and Response interceptor. After creating an AXIOS instance, you can configure the request interceptor

Basic use and configuration of AXIOS

Request to intercept

Some operations are performed uniformly before a request is sent, often handling tokens in the request header

var instance = axios.create({ timeout: 60000, withCredentials: True}) / / request interceptor instance. The interceptors. Request. Use (function (config) {/ / before sending a request to do some config. The headers. The token = 'token' Reject (error){return promise.reject (error)})Copy the code

Headers, such as token, can also be processed globally after an AXIos instance is created. Most OF the API’s carrying information should not change

instance.defaults.headers.common["token"] = getCookie("accessToken")
instance.defaults.headers.common["SID"] = '3f25944323'
instance.defaults.headers.common["action"] = 'Server'
Copy the code

There are other methods besides Common, which are listed here for later use

instance.defaults.headers.common["token"] = "Token"
instance.defaults.headers.get[CSRFToken'] = "Token"
instance.defaults.headers.put['CSRFToken'] = "Token"
instance.defaults.headers.delete['CSRFToken'] = "Token"
instance.defaults.headers.patch['CSRFToken'] = "Token"
Copy the code

The response to intercept

After receiving the response from the server, perform certain operations in a unified manner. The common operation is to uniformly process various status codes

/ / response interceptor instance. Interceptors. Response. Use (/ / request is successful business processing response = > {/ / intercept the response, If (response.status === 200 && response.data.request_id) {// Specify the return value of the request code with the backend. If (response.data.code == 0) {return response.data; } else if (response.data.code == 1) {// Window.location. href = LOGIN_URL} else if (response.data.code == 2) {// Router.push ({path: '/unauthorized'})} else if (response.data.code == 4) {router.push({path: '/unauthorized'})} Else if (response.data.code == 4) { '/buy' }) return response.data; } else {let MSG = response.data. MSG message. error({Message: MSG, duration: 3000, center: true, offset: 50, showClose: Reject (error)}} return response}, // Interface error status processing, the interface fails to return data error => {// common error status code interception processing, If (error.response.status === 500) {message. error({Message: 'server internal error ', duration: 3000, center: true, offset: 50, showClose: true }) router.push({ path: '/errorpage' }) return Promise.reject(error) } if (error.response.status === 404) { router.push({ path: "/undefined" }) return Promise.reject(error) } if (error.response.status === 403) { store.dispatch("app/setServerError",  "403") removeCookie("csrftoken") removeCookie("sessionid") router.push({ path: "/errorpage" }) return Promise.reject(error) } if (error.response.status === 422) { // let msg= error.response.data.msg Let MSG = window.rootvueinstance.$i18n.t('Error.' + error.response.data.msg) message.error ({Message: msg, duration: 3000, center: true, offset: 50, showClose: True}) return promise.reject (error)} if (error.response.status === 409) {let msg409 = 'reject list failed, 'return promise.reject (error)} //... return Promise.reject(error.response.status) })Copy the code

Export instance

export default instance
Copy the code

The Axios interceptor is now configured