axios取消請(qǐng)求的實(shí)踐記錄分享

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
 console.log('Request canceled', thrown.message);
 } else {
 // handle error
 }
});

axios.post('/user/12345', {
 name: 'new name'
}, {
 cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
 // An executor function receives a cancel function as a parameter
 cancel = c;
 })
});

// cancel the request
cancel();

/* 接口listApi.getList方法如下 */
const CancelToken = axios.CancelToken
const source = CancelToken.source()
getVideoList ({
 key
}) {
 return axiosInstance.post('/video/list', {
 key
 }, {
 cancelToken: source.token
 })
},
cancelRequest () {
 // 取消請(qǐng)求
 source.cancel()
}

/* 頁面中獲取列表的函數(shù) */
getList (query, cb) {
 // 取消之前的請(qǐng)求
 listApi.cancelRequest()
 // 發(fā)送請(qǐng)求
 listApi.getVideoList({key: 'value'}).then(resp => {
 // handle response data
 }).catch(err => {
 if (axios.isCancel(err)) {
 console.log('Request canceled!')
 } else {
 this.$message.error(err.message)
 }
 })
}

/* 頁面中獲取列表的函數(shù) */
getList (query, cb) {
 // 發(fā)送請(qǐng)求
 listApi.getVideoList({key: 'value'}).then(resp => {
 // handle response data
 // 取消請(qǐng)求
 listApi.cancelRequest()
 }).catch(err => {
 if (axios.isCancel(err)) {
 console.log('Request canceled!')
 } else {
 this.$message.error(err.message)
 }
 })
}

/* 接口listApi.getList方法如下 */
const CancelToken = axios.CancelToken
let cancel
getVideoList ({
 key
}) {
 return axiosInstance.post('/video/list', {
 key
 }, {
 cancelToken: new CancelToken(function executor (c) {
 cancel = c
 })
 })
},
cancelRequest () {
 // 第一次執(zhí)行videoService.cancelRequest()時(shí)還未發(fā)送getVideoList請(qǐng)求，會(huì)報(bào)錯(cuò)，添加如下判斷
 if (typeof cancel === 'function') {
 // 取消請(qǐng)求
 cancel()
 }
}

/* 頁面中獲取列表的函數(shù) */
getList (query, cb) {
 // 取消之前的請(qǐng)求
 listApi.cancelRequest()
 // 發(fā)送請(qǐng)求
 listApi.getVideoList({key: 'value'}).then(resp => {
 // handle response data
 }).catch(err => {
 if (axios.isCancel(err)) {
 console.log('Request canceled!')
 } else {
 this.$message.error(err.message)
 }
 })
}