自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,需要解决问题:
1. 请求带token校验
2. post请求请求体处理
3. 响应未登录跳转登录页处理
4. 响应错误提示
5. 响应超时,重新请求处理
由于接口调用,基本每个页面都有,这些问题,也都可以全局处理,因此抽离了出来,保存为api/axios.js, 在main.js中引入。
处理过程中,借鉴了很多文章。借鉴的文章较多,就不一一列举了。
如有更好的建议,可以留言告诉我。谢谢^_^
// axios全局配置,包括验证检验及错误处理 import axios from 'axios' import qs from 'qs' import store from 'store' import {code} from 'api/config' import {Message} from 'element-ui' // 超时设置 const service = axios.create({ timeout: 10000 }) // 请求超时重新请求次数,请求间隙 axios.defaults.retry = 3 axios.defaults.retryDelay = 1000 // http request 拦截器 service.interceptors.request.use( config => { // 每次请求都为http头增加Authorization字段,其内容为token if (store.state.user.token) { config.headers['X-LMP-Auth-Token'] = store.state.user.token } // post请求参数处理 config.headers['Content-Type'] = 'application/x-www-form-urlencoded' if (config.method === 'post') { if (!config.__retryCount || config.__retryCount === 0) { // 只处理第一次请求数据,保证后面请求超时请求数据正常 config.data = qs.stringify({...config.data}) } } return config }, err => { return Promise.reject(err) } ) service.interceptors.response.use( response => { const data = response.data if (data.code === code.errNotLogin) { store.commit('user/setToken', '') location.replace('/login') } else { return response } }, err => { // 请求超时,设置重新请求及错误提示 let config = err.config if (!config || !config.retry) { Message.error((err && err.data && err.data.msg) || '接口异常') return Promise.reject(err) } // 设置请求超时次数 config.__retryCount = config.__retryCount || 0 if (config.__retryCount >= config.retry) { Message.error((err && err.data && err.data.msg) || '接口异常') return Promise.reject(err) } config.__retryCount += 1 let backoff = new Promise((resolve) => { setTimeout(() => { resolve() }, config.retryDelay || 1) }) return backoff.then(() => { return service(config) }) } ) export default service