request拦截
调用接口地址总有那么一段是一样的
如 http://www.example.com/api/getlist
或是 http://www/example.com/api/getarticle
这其中有一段是相同的。
axios中在request拦截器中或create中添加该相同的基础URL
http://www/example.com/api/
后期调用时就可以简写这URL,直接axios.get("getlist").then(.....)
axios.interceptors.request.use(
config =>{
//do something
config.baseURL = "http://www/example.com/api/"
config.headers['content-type'] = 'application/json'
return config;
},
err =>{
return Promise.reject(err);
}
)
// axios实例
var instance = axios.create({
timeout: 5,
baseURL
})
instance.interceptors.request.use(
function(config) {
// 请求头添加token
/** 每次请求之前判断是否存在token
* 如存在,则统一在http请求的header都加上token,就不用每次请求都手动添加了
*/
if (store.state.UserToken) {
config.headers.Authorization = store.state.UserToken
}
return config
},
function(error) {
return Promise.reject(error)
}
)
response拦截
instance.interceptors.response.use(
response => {
return response.data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求出错'
break
case 401:
Message.warning({
message: '授权失败,请重新登录'
})
store.commit('LOGIN_OUT')
setTimeout(() => {
window.location.reload()
}, 1000)
return
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = '请求错误,未找到该资源'
break
case 500:
err.message = '服务器端出错'
break
}
} else {
err.message = '连接服务器失败'
}
Message.error({
message: err.message
})
return Promise.reject(err.response)
}
)