axios 取 消 请 求

axios-取消令牌，是用于在发送请求时，允许你取消该请求的一种机制

axios取消令牌是通过 axios.CancelToken.source() 方法创建的

当你创建一个令牌时，它会生成一个令牌对象，这个令牌对象包含（token属性：用于标识请求的标记）、（cancel()方法：用于取消请求的函数），

当你想取消请求的时候，调用 cancel()方法，即可终止该请求。

---

举个例子，如下：

* 创建一个取消令牌
const source = axios.CancelToken.source()

* 发送请求并传递取消令牌
axios
  .get('/api/data', {
    cancelToken: source.token
  })
  .then(res => {
    // 请求成功的处理逻辑
  })
  .catch(error => {
    // axios.isCancel(error) 是 Axios 库提供的一个方法，用于判断一个错误是否是由取消请求导致的
    if (axios.isCancel(error)) {
      // 请求被取消的处理逻辑
    } else {
      // 其他错误处理逻辑
    }
  })

* 在需要取消请求的时候调用 cancel 方法
source.cancel('请求被取消了，可以添加一个取消原因')

补充说明：

在上面的代码中，当，使用取消令牌取消请求后，如果请求被取消了，会触发一个错误，

此时可以使用 axios.isCancel(error) 来判断这个错误是否是由取消请求引起的，

如果返回值为true，则表示这个错误是由取消请求引起的，否则表示是其他类型的错误

---

例子：

import type { CancelToken } from 'axios'
export const settingUserSystem = (data: any, cancelToken: CancelToken) => {
	return request({
		method: 'post',
		url: Api.SystemSetting,
		data,
		cancelToken
	})
}

-----------------------------------------------

import axios from 'axios'

* 用于存储不同请求的 CancelTokenSource
const cancelSources: { [key: string]: any } = {}

const saveSystem = async () => {
	* 创建一个新的 CancelTokenSource
	cancelSources['cancelKey'] = axios.CancelToken.source()
	
	const params = { Key: '1', Secret: '2' }
	
	try {
		const { state, message: msg } = await userApi.settingUserSystem(params, cancelSources['cancelKey'].token)
		if (state == 200) {
			message.success('保存成功')
		} else {
			message.error(msg)
		}
	} catch (error) {
		message.error('网络请求发送失败~')
	}
}

* 当你想取消这个请求时候，就触发这个方法
const cancelToken = () => {
	cancelSources['cancelKey'].cancel('请求被取消了，可以添加一个取消原因')
}


<a-button @click="saveSystem">保存</a-button>
<a-button @click="cancelToken">取消</a-button>