axios内部提供axios.CancelToken.source().cancel()方法用于取消正在发送的请求,我们可以利用这个去处理
- 简单的api封装,具体看公司项目的封装方式
import axios from 'axios'
export function getDataList (cancelToken) {
return axios({
method: 'get',
url: 'http://xxx.xxx.x.x:4399/getList',
cancelToken
})
}
- vue组件中发请求,取消正在发送的请求
<template>
<div>
<el-button @click="handleGetData">发送请求</el-button>
<el-button @click="handleCancel">取消请求</el-button>
</div>
</template>
<script>
import { getDataList } from './request'
import axios from 'axios'
export default {
data() {
return {
source: null
}
},
methods: {
async handleGetData() {
const source = axios.CancelToken.source()
this.source = source
try {
const res = await getDataList(source.token)
console.log(res)
} catch (error) {
}
},
handleCancel() {
this.source.cancel('取消请求')
}
}
}
</script>