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 // 需要設定cancelToken欄位，用于取消請求使用
})
}
- vue組件中發請求，取消正在發送的請求
<template>
<div>
<el-button @click="handleGetData">發送請求</el-button>
<el-button @click="handleCancel">取消請求</el-button>
</div>
</template>
<script>
// 這里為了方便直接將axios匯入了，其實可以在封裝api的時候做一下處理可能會更好
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
// source接收的是axios內部提供用于取消請求的方法
// 我個人的理解是，每一個請求都有對應自己的token，axios通過這個去取消對應的請求
try {
const res = await getDataList(source.token)
console.log(res)
} catch (error) {
// console.log(error)
}
},
// 取消請求
handleCancel() {
this.source.cancel('取消請求')
// cancel內的取消請求可以當成是取消請求后拋出的提示文案，可列印this.source.cancel('取消請求')看看
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/263855.html
標籤：其他
下一篇：仿網易云PC端專案-vue