vuex
const whiteUrl = ['/api/url']
const cancelAxios = {
state: {
cancelAxiosArr: []
},
mutations: {
pushAxios(state, payload) {
state.cancelAxiosArr.push(payload)
},
clearAxios(state) {
state.cancelAxiosArr.forEach((item) => {
item.cancel('取消请求')
})
state.cancelAxiosArr = []
},
clearCurRequest(state, config) {
for (let i = state.cancelAxiosArr.length - 1; i >= 0; i--) {
const item = state.cancelAxiosArr[i]
if (config && whiteUrl.indexOf(config.url) !== -1 && item.urlPath === config.url) {
item.cancel('取消请求')
state.cancelAxiosArr.splice(i, 1)
}
}
}
}
}
export default cancelAxios
封装好的请求
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import vuexstore from '@/store'
import router from '@/router'
router.beforeEach((to, from, next) => {
vuexstore.commit('clearAxios')
next()
})
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 30000
})
service.interceptors.request.use(
config => {
vuexstore.commit('clearCurRequest', config)
config.cancelToken = new axios.CancelToken(res => {
vuexstore.commit('pushAxios', { 'urlPath': config.url, 'cancel': res })
})
}
return config
},
error => {
Promise.reject(error)
}
)
service.interceptors.response.use(
async response => {
return response
},
error => {
if (axios.isCancel(error)) {
return Promise.reject()
}
if (error.toString().includes('401')) {
MessageBox.confirm(
'你已被登出,可以取消继续留在该页面,或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
})
return Promise.reject(new Error('error'))
} else if (error.toString().includes('404')) {
Message.error('该服务未启动或服务不存在')
} else if (error.toString().includes('500')) {
Message.error('服务器错误,请联系管理员')
} else if (error.response.data && error.response.data.msg) {
Message.error(error.response.data.msg)
} else {
console.error(error.message)
}
return Promise.reject(error)
}
)
export default service