axios拦截器用来在请求或响应被 then
或 catch
处理前拦截它们。比如token验证
//文件名 fetch.js
import axios from 'axios'
import store from './store' //引入vuex
import { Message } from 'element-ui'
const serves = axios.create({
baseURL: 'https://api.example.com',
timeOur: 5000 // 请求过期时间
})
serves.interceptors.request.use(
config => {
// 判断是否有token
if(store.state.token) {
config.header['T-token'] = getCookie('token') // 'T-token':token的参数名,getCookie从cookie中取到token }
return config
},
error => Promise.reject(error)
)
serves.interceptors.response.use(
res=> {
const {data} = res.data
if(data.code !== 200) {
Message({
message: data.message || 'error',
type: 'error',
duration: 5 * 1000
})
} else {
return data
}
},
error => Promise.reject(error)
)
export default serves
使用拦截器
import serves from './fetch.js'
// post 请求 注意参数使用data作为参数名
export function getUserInfo(data) {
return serves({
url: '/userinfo',
methods: 'post'
data
})}
// get 请求使用params作为参数名
export function getUserInfo(params) {
return serves({
url: '/userinfo',
methods: 'post',
params })}