Encapsulate Axios in @/libs/request.js path, encapsulating request parameters, request headers, error messages, Request interceptor, Response interceptor, unified error handling, baseURL Settings, etc.

import axios from 'axios'; import get from 'lodash/get'; import storage from 'store'; -- export default function Request (obj){return new Promise((resolve,reject)=>{instance({ url:obj.url, method:obj.method||'get', params:obj.params||null, data:obj.data||null, cancelToken:obj.cancelToken||null, . obj.others }) .then(res=>{ if(res.data.exceptionCode==302){ window.location.href=res.data.exceptionMsg; return; } resolve(res.data); }) .catch(err=>{reject(err)}); }); } function a_add(params){// return request({url: ",method:'post',... Params}) //} const request = axios.create({baseURL: process.env.vue_app_base_URL, timeout: WithCredentials :true}); Const errorHandler = (error) => {const status = get(error, 'response.status'); Switch (status) {/* eslint-disable no-param-reassign */ case 400: error. Message = 'Request error '; break; Case 401: error. Message = 'unauthorized, please login '; break; Case 403: error. Message = 'access denied '; break; Case 404: error. Error message = ` request address: ${error. The response. Config. Url} `; break; Case 408: error. Message = 'Request timed out '; break; Case 500: error. Message = 'server internal error '; break; Case 501: error. Message = 'service not implemented '; break; Case 502: error. Message = 'gateway error '; break; Case 503: error. Message = 'service unavailable '; break; Case 504: error. Message = 'gateway timed out '; break; Case 505: error. Message = 'HTTP version is not supported '; break; default: break; /* eslint-disabled */ } return Promise.reject(error); }; / / request interceptor / / request before the intercept request. The interceptors. Request. Use ((config) = > {/ / if the token is / / make each request with a custom token Please according to the actual situation to modify / / eslint - disable - next - line no - param - reassign config. The headers. The Authorization = ` bearer ${storage.get('ACCESS_TOKEN')}`; // Request route parameter Settings config.params. XXX = "return config; }, errorHandler); / / response after the interceptor / / response to intercept the request. The interceptors. Response. Use ((response) = > {const dataAxios = response. The data; Const {code} = dataAxios; const {code} = dataAxios; If (code === undefined) {return dataAxios; // eslint-disable-next-line no-else-return} else {// There is code indicating this isa back-end interface for further checking switch (code) {case 200: // [Example] code === 200 no error return dataaxios. data; Case 'XXX ': // [Example] Other code return' XXX '; Default: // not the correct code return 'not the correct code'; } } }, errorHandler); export default request;Copy the code

Use VUE_APP_BASE_URL to distinguish the API addresses of the line and the development environment. Code plays a critical role, such as verification when tokens expire. A package called Sotre is used as a locally stored tool to store tokens