解決：axios請求的取消

在使用 Axios 發起請求時，有時候你可能需要取消這些請求，比如當組件銷毀時或者用戶操作導致不再需要獲取之前發起的請求結果。Axios 支持通過 Cancel Token 取消請求。

以下是使用 Axios 的 CancelToken 來取消請求的基本步驟：

創建 Cancel Token：
首先你需要創建一個取消令牌（Cancel Token）。從 Axios 0.18.0 版本開始，推薦的方式是使用 axios.CancelToken.source() 工廠函數來創建一個包含 token 和 cancel 方法的對象。

const source = axios.CancelToken.source();

配置請求使用 Cancel Token：
在發起請求時，將上面創建的 token 傳遞給請求配置中的 cancelToken 字段。

axios.get('/user/12345', {cancelToken: source.token
})
.then(function(response) {// 處理成功情況
})
.catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 處理錯誤情況}
});

取消請求：
如果你想取消發起的請求，只需調用 source.cancel() 方法，并可以傳入一個可選的取消原因作為參數。

source.cancel('用戶取消了請求');

在 Vue 組件中管理取消邏輯（例如，在組件銷毀前取消請求）：

export default {data() {return {cancelSource: null,};},methods: {fetchData() {this.cancelSource = axios.CancelToken.source();axios.get('/someEndpoint', {cancelToken: this.cancelSource.token}).then(response => {// 處理響應數據}).catch(error => {if (axios.isCancel(error)) {console.log('Request canceled');} else {// 處理其他錯誤}});}},beforeDestroy() {if (this.cancelSource) {this.cancelSource.cancel('Component destroyed, request canceled.');}}
}

以上是在Vue 2 中使用 Axios 取消請求的方法。記得合理管理你的取消令牌，避免內存泄漏或其他潛在問題。

最后附上示例

• 示例：在輸入框里輸入1234，會發送4次請求，但只會保留1個請求，其余的請求會被取消

接口處添加cancelToken

export function getERPInfoByDeviceCode(data, cancelToken) {return request({url: '/v1/dfs/deviceInfo/getERPInfoByDeviceCode',method: 'post',params: data,cancelToken, // 添加取消令牌})
}

使用取消請求

// 此處template代碼為輸入框綁定input事件給getERPInfoByDeviceCodeData()方法即可
<script>
import { getERPInfoByDeviceCode } from '@/api/standard/device-base-api'
import axios from 'axios'
export default {data() {return {cancelToken: null, // 保存取消令牌的引用}},methods: {async getERPInfoByDeviceCodeData() {// 如果存在之前的請求，取消它if (this.cancelToken) {this.cancelToken.cancel('用戶取消了請求')}// 創建新的取消令牌const cancelTokenSource = axios.CancelToken.source()this.cancelToken = cancelTokenSourcetry {const params = {}// 請求接口傳入cancelTokenSource.token配置await getERPInfoByDeviceCode(params, cancelTokenSource.token)} catch (error) {if (axios.isCancel(error)) {console.log('Request canceled:', error.message)} else {// 處理其他錯誤console.error('Error fetching info:', error)}}},},
}
</script>