axios请求拦截及请求超时重新请求设置
自从使用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