axios如何取消请求，其原理是什么？
axios 可以通过创建一个 CancelToken 来取消一个请求,基本原理是:
- 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。
- 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例传递进去。
- 当我们需要取消请求时,调用 CancelToken 实例的 cancel() 方法即可取消对应的请求。
- axios 检测到配置的 cancelToken 被取消,就会取消掉这个请求,并在错误回调中返回一个 Cancel 错误。
axios 内部会监听 cancelToken 实例的 cancel 信号,一旦触发就会跳出队列,取消对应请求的执行。
示例代码:
js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user', {cancelToken: source.token
}).catch(function(thrown) {if(axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求
source.cancel('Operation canceled by the user.');
vue、React项目中如何取消
在基于 React 或 Vue 的应用中，你可以通过封装 Axios 并结合组件的状态管理来实现取消请求的功能。下面分别介绍在 React 和 Vue 中如何实现这一点。
在 React 中的实现：
- 创建一个封装的 Axios 实例，以便于应用中的多个组件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';const instance = axios.create();export default instance;
- 在组件中使用这个封装的 Axios 实例，并结合组件的状态管理来处理取消请求的逻辑。
// YourComponent.js
import React, { useState } from 'react';
import axiosInstance from './axiosInstance';function YourComponent() {const [loading, setLoading] = useState(false);const [data, setData] = useState(null);const source = axiosInstance.CancelToken.source();const fetchData = async () => {try {setLoading(true);const response = await axiosInstance.get('/api/some-endpoint', {cancelToken: source.token});setData(response.data);setLoading(false);} catch (error) {if (axiosInstance.isCancel(error)) {console.log('请求被取消：', error.message);} else {// 处理其他错误}setLoading(false);}};const cancelRequest = () => {source.cancel('请求被用户取消');};return (<div>{loading ? <p>Loading...</p> : <p>{data}</p>}<button onClick={fetchData}>Fetch Data</button><button onClick={cancelRequest}>取消请求</button></div>);
}export default YourComponent;
在 Vue 中的实现：
- 创建一个封装的 Axios 实例，同样可以让多个组件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';const instance = axios.create();export default instance;
- 在组件中使用这个封装的 Axios 实例，并结合组件的状态管理来处理取消请求的逻辑。
<template><div><p v-if="loading">Loading...</p><p v-else>{{ data }}</p><button @click="fetchData">Fetch Data</button><button @click="cancelRequest">取消请求</button></div>
</template><script>
import axiosInstance from './axiosInstance';export default {data() {return {loading: false,data: null,source: axiosInstance.CancelToken.source()};},methods: {async fetchData() {try {this.loading = true;const response = await axiosInstance.get('/api/some-endpoint', {cancelToken: this.source.token});this.data = response.data;this.loading = false;} catch (error) {if (axiosInstance.isCancel(error)) {console.log('请求被取消：', error.message);} else {// 处理其他错误}this.loading = false;}},cancelRequest() {this.source.cancel('请求被用户取消');}}
};
</script>
原理
Axios 取消请求的原理是基于底层网络请求库（如 XMLHttpRequest 或 Fetch）提供的中止机制。当你调用取消令牌的 cancel 方法时，Axios 会触发中止底层的网络请求，从而终止正在进行的请求过程。
具体来说，以下是 Axios 取消请求的原理：
-
创建 CancelToken 对象： 在发起请求之前，你可以通过
axios.CancelToken.source()方法创建一个 CancelToken 对象，并获取其中的token。这个token是一个用于标识该请求的令牌。 -
关联 CancelToken： 将创建的 CancelToken 对象中的
token关联到请求的配置中，通过cancelToken参数。这告诉 Axios 在取消令牌触发时要取消这个请求。 -
取消请求： 当你想要取消请求时，调用 CancelToken 对象中的
cancel方法，并提供一个取消的原因。这会触发 Axios 内部的逻辑，导致底层的网络请求被中止。 -
捕获取消错误： 如果请求在取消前已经发出，Axios 会抛出一个名为
Cancel的错误。你可以使用axios.isCancel(error)来检查是否是取消错误。在.catch部分处理这个取消错误。
底层 XMLHttpRequest 和 Fetch API 都提供了终止请求的机制。当取消请求时，Axios 会调用底层网络请求的相应中止方法，例如 xhr.abort() 或 fetch.abort()，从而使网络请求停止并抛出取消错误。这个机制允许你有效地取消正在进行的请求，避免不必要的数据传输和处理。