axios取消上次请求发起当前请求

### 如何取消特定的 Axios 请求 Axios 提供了一种机制来取消 HTTP 请求，这可以通过创建一个 `CancelToken` 实现。以下是具体实现方式： #### 使用 CancelToken 取消请求 通过 Axios 的 `CancelToken` 功能可以安全地取消未完成的请求。下面是一个完整的代码示例[^3]： ```javascript // 创建一个用于存储取消函数的对象 const cancelTokenSource = axios.CancelToken.source(); axios.get('/user/12345', { cancelToken: cancelTokenSource.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理其他错误 } }); // 当需要取消请求时调用此方法 cancelTokenSource.cancel('Operation canceled by the user.'); ``` 在此示例中，`axios.CancelToken.source()` 方法被用来生成一个新的取消令牌源对象。该对象包含两个属性：`token` 和 `cancel` 函数。当调用 `cancel` 函数时，任何使用相同 `token` 发起的请求都会被终止。 #### 将其集成到 React Hook 中 如果希望在 React 或 Vue 等框架中管理状态并自动取消组件卸载时的请求，则可参考以下模式[^4]: ```javascript import { useState, useEffect } from 'react'; import axios from 'axios'; export default function UseDataFetching(url) { const [data, setData] = useState(null); useEffect(() => { const source = axios.CancelToken.source(); axios.get(url, { cancelToken: source.token }) .then(response => { setData(response.data); }).catch(error => { if (!axios.isCancel(error)) throw error; }); return () => { source.cancel('Component unmounted'); }; }, [url]); return data; } ``` 上述代码展示了如何利用 `useEffect` 配合 `CancelToken` 来确保组件销毁前停止不必要的网络活动。 #### 结合 Vue 组件中的应用实例 对于基于 Vue 的项目，也可以采用类似的逻辑处理模态框或其他交互场景下的异步操作中断需求[^5]: ```vue <template> <div> <!-- 关闭按钮 --> <button @click="handleClose">关闭</button> <u-modal v-if="isModalVisible"> 正在加载数据... </u-modal> </div> </template> <script> import axios from 'axios'; export default { data() { return { isModalVisible: true, cancelSource: null }; }, methods: { handleClose() { if (this.cancelSource) { this.cancelSource.cancel('User closed modal'); } this.isModalVisible = false; }, fetchData() { this.cancelSource = axios.CancelToken.source(); axios.get('/api/data', { cancelToken: this.cancelSource.token }) .then((response) => { console.log('Fetched Data:', response.data); }) .catch((error) => { if (axios.isCancel(error)) { console.warn('Fetch was cancelled:', error.message); } else { console.error('Error fetching data:', error); } }); } }, mounted() { this.fetchData(); } }; </script> ``` 以上代码片段说明了如何结合 Vue 生命周期钩子以及事件监听器，在用户主动关闭弹窗时及时释放资源。 ---

### 如何使用 Axios 取消 HTTP 请求 Axios 提供了一种机制来取消正在进行的 HTTP 请求。这可以通过创建一个取消令牌并将其传递给请求配置中的 `cancelToken` 属性实现[^4]。 为了具体展示如何操作，下面是一个简单的例子： ```javascript // 创建一个 CancelToken 的源对象 const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // c 是一个取消函数 cancel = c; }) }); // 当需要取消请求时调用此方法 if (/* some condition */) { cancel('Operation canceled by the user.'); } ``` 通过上述代码片段可以看到，在发起 GET 请求之前先创建了一个新的 `CancelToken` 实例，并传入了一个执行器函数作为参数。该执行器函数接收一个用于触发取消行为的回调函数 `c`。一旦决定要取消请求，则只需简单地调用这个保存下来的 `cancel()` 函数即可。 此外还可以利用 ES6 中的 Promise 来处理更复杂的场景或者多个并发请求之间的相互依赖关系等问题。需要注意的是，如果想要在一个组件卸载前自动取消所有未完成的数据获取过程的话，可以在组件生命周期结束的时候（比如 React 组件里的 componentWillUnmount 阶段），主动调用取消函数以防止内存泄漏或其他潜在问题的发生。 #### 使用全局事件监听器取消请求 除了手动管理每个单独的请求外，也可以设置全局事件监听器来统一管理和响应特定条件下的批量取消动作。例如当页面即将刷新或关闭浏览器窗口时，确保所有的异步任务都能被妥善清理掉。 ```javascript window.addEventListener('beforeunload', () => { if(cancel){ cancel('Page is being unloaded'); } }); ``` 以上方式能够有效地帮助开发者更好地控制网络请求的状态转换逻辑，提高用户体验的同时也减少了不必要的资源浪费。