自从使用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