问题描述
vue + iview 项目中，当路由切换、tabs切换或者业务change的时候，请求数据缓慢，会导致数据错乱，比如用数组来存放数据的话数据可能会重复叠加。
解决方法
使用 axios 的 cancel token 方法来取消请求
// using the CancelToken.source factory
const CancelToken = axios.CancelToken
const source = CancelToken.source()
// get
axios.get('/user/1', {
cancelToken: source.token
}).catch(function (thrown) {
if(axios.isCancel(thrown) {
console.log('Request canceled', thrown.message)
}) else {
// handle error
}
})
// post
axios.post('/user/1', {
name: ''
}, {
cancelToken: source.token
})
// cancel request 参数可选
source.cancel('取消上次请求')
// use executor function
const CancelToken = axios.CancelToken
let cancel
// get
axios.get('/user/1', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c
})
})
// post
axios.post('/user/1', {
name: ''
}, {
cancelToken: new CancelToken(function executor(c) {
cancel = c
})
})
// cancel request
cancel()
