vue axios基于常见业务场景的二次封装的实现

{ //1.将当前请求的URL添加进请求列表数组 requestList.push(config.url) //2.请求开始，改变loading状态供加载动画使用 store.dispatch('changeGlobalState',{loading: true}) //3.从store中获取token并添加到请求头供后端作权限校验 const token = store.getters.userInfo.token if (token) { config.headers.token = token } return config },function (error) { return Promise.reject(error) })

item === response.config.url),1) // 2.当请求列表为空时，更改loading状态 if (requestList.length === 0) { store.dispatch('changeGlobalState',{loading: false}) } // 3.统一处理权限认证错误管理 if (response.data.code === 900401) { window.ELEMENT.Message.error('认证失效，请重新登录！',1000) router.push('/login') } return response },function (error) { // 4.处理取消请求 if (axios.isCancel(error)) { requestList.length = 0 store.dispatch('changeGlobalState',{loading: false}) throw new axios.Cancel('cancel request') } else { // 5.处理网络请求失败 window.ELEMENT.Message.error('网络请求失败',1000) } return Promise.reject(error) })

{ axios[method](url,Object.assign({},{ //1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token cancelToken: new CancelToken(function executor (c) { //2.将cancel token存入列表 sources.push(c) }) })).then(response => { resolve(response.data) },err => { if (err.Cancel) { console.log(err) } else { reject(err) } }).catch(err => { reject(err) }) }) }

const post = (url,config = {}) => {
return request(url,'post')
}

const get = (url,'get')
}
//3.导出cancel token列表供全局路由守卫使用
export {sources,get}

{ document.title = to.meta.title || to.name //路由发生变化时取消当前页面网络请求 sources.forEach(item => { item() }) sources.length = 0 next() })

import axios from 'axios'
import store from '../store'
import router from '../router'

// axios.defaults.timeout = 10000
const requestList = []

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

axios.defaults.baseURL = process.env.BASE_URL
// 自定义拦截器
axios.interceptors.request.use((config) => {
requestList.push(config.url)
store.dispatch('changeGlobalState',{loading: true})
const token = store.getters.userInfo.token
if (token) {
config.headers.token = token
}
return config
},function (error) {
return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
requestList.splice(requestList.findIndex(item => item === response.config.url),1)
if (requestList.length === 0) {
store.dispatch('changeGlobalState',{loading: false})
}
if (response.data.code === 900401) {
window.$toast.error('认证失效，请重新登录！',function (error) {
requestList.length = 0
store.dispatch('changeGlobalState',{loading: false})
if (axios.isCancel(error)) {
throw new axios.Cancel('cancel request')
} else {
window.$toast.error('网络请求失败！',1000)
}
return Promise.reject(error)
})

const CancelToken = axios.CancelToken
let sources = []

const request = function (url,Object.assign(config,{
cancelToken: new CancelToken(function executor (c) {
sources.push(c)
})
})).then(response => {
resolve(response.data)
},err => {
reject(err)
}).catch(err => {
reject(err)
})
})
}

const post = (url,'get')
}

export {sources,get}