封装的axios实现取消请求
或许很少用到这个取消请求这个功能,但是不能不会!!
·
背景
业务中,在tab切换的时候会发起请求,拿到结果再展示再视图中,此时快速切换tab并且接口返回较慢会导致视图数据错乱情况。
方案
针对这种情况,可以在第二次请求的时候把第一次的取消掉。以axios库和vue的项目为例,一般的项目重新封装axios,所有的请求都会走这个axios的实例,那么就需要在全局axios的请求拦截中添加取消请求
代码实现
封装的axios中:
const http= axios.create()
http.interceptors.request.use(
config => {
config.cancelToken = new axios.CancelToken(cancel => {
// 存入一个cancel token
store.commit('addCancelToken', cancel)
})
},
error => {...}
)
http.interceptors.response.use(
response => {...},
error => {
// 拦截axios错误
if (error instanceof axios.Cancel) return
...
}
)
vuex中:
// store
state: {
cancelTokenList: []
},
mutations: {
addCancelToken(state, payload) {
const maxCancelTokenNum = 15 // 最大存cancelToken条数
if (state.cancelTokenList.length >= maxCancelTokenNum) {
state.cancelTokenList.shift();
}
state.cancelTokenList.push(payload)
},
deleteCancelToken(state, payload) {
state.cancelTokenList.splice(payload, 1)
}
}
使用:
// 路由切换中使用
router.beforeEach((to, from, next) => {
cancelTokenList.forEach((cancel ,index) => {
cancel()
deleteCancelToken(index)
})
})
// 某一个请求发起前用
getData() {
cancelTokenList.forEach((cancel ,index) => {
cancel()
deleteCancelToken(index)
})
//发起请求
http...
}
总结
或许很少用到这个取消请求这个功能,但是不能不会!!
更多推荐
已为社区贡献2条内容
所有评论(0)