import axios from "axios"; import router from "../router"; import { Message } from 'element-ui'; let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识 let cancelToken = axios.CancelToken; let removePending = (ever) => { for(let p in pending) { if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体 pending[p].f(); //执行取消操作 pending.splice(p, 1); //把这条记录从数组中移除 } } } // 创建axios实例 var instance = axios.create({ timeout: 1000 * 12, // 外网 baseURL: 'http://120.27.234.126:8010' // 本地 // baseURL: 'http://192.168.1.165:8010' }) // 请求拦截器 instance.interceptors.request.use( config => { // 登录流程控制中,根据本地是否存在token判断用户的登录情况 // 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token // 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码 // 而后我们可以在响应拦截器中,根据状态码进行一些统一的操作。 const token = localStorage.getItem('accessToken') const lastFarmId = Number(localStorage.getItem('lastFarmId')); token && (config.headers.accessToken = token) removePending(config); //在一个ajax发送前执行一下取消操作 config.cancelToken = new cancelToken((c)=>{ // 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式 pending.push({ u: config.url + '&' + config.method, f: c }); }); let data = config.data || config.params || {} data.farmId = lastFarmId return config }, error => Promise.error(error) ) // 响应拦截器 instance.interceptors.response.use( // 请求成功 res => res.status === 200 ? Promise.resolve(res.data) : Promise.reject(res), // 请求失败 error => { const { response } = error; if (response) { errorHandle(response.status, response.data.message); return Promise.reject(response); } } ) /** * 跳转登录页 * 携带当前页面路由,以期在登录页面完成登录后返回当前页面 */ const toLogin = () => { let path = '/'; if(router.currentRoute.fullPath.indexOf('login') === -1) { path = router.currentRoute.fullPath } router.replace({ path: '/login', query: { redirect: path } }); } /** * 请求失败后的错误统一处理 * @param {Number} status 请求失败的状态码 */ const errorHandle = (status, other) => { // 状态码判断 switch (status) { // 401: 未登录状态,跳转登录页 case 401: toLogin(); break; // 403 token过期 // 清除token并跳转登录页 case 403: Message.error('登录过期,请重新登录'); localStorage.removeItem('accessToken'); localStorage.removeItem('UserName'); localStorage.removeItem('UserId'); setTimeout(() => { toLogin(); }, 1000); break; // 404请求不存在 case 404: Message.error('请求的资源不存在'); break; case 500: Message.error('请求失败,请联系管理员'); break; default: console.log(other); }} export default instance