首页前端axios点击取消请求

前端axios点击取消请求

时间: 2025-03-01 14:08:15 浏览: 57

### 如何在前端使用 Axios 取消 HTTP 请求为了实现取消 HTTP 请求的功能，在创建 Axios 实例时可以利用 `CancelToken` 或者更推荐的方式是使用基于 AbortController 的方法来管理请求的生命周期。当发起一个 PUT 请求用于上传文件分片时，可以通过如下方式集成取消功能： ```javascript import axios from 'axios'; // 创建一个新的AbortController实例 const controller = new AbortController(); const { signal } = controller; async function uniformChunkRequest() { try { const response = await axios.put( url, formData, { ...options, signal, // 将signal传递给Axios配置项 onUploadProgress(progressEvent) { let progress = (progressEvent.loaded / file.size) * 100; console.log(`当前进度 : ${Math.round(progress)}%`); } }); currentNumRequest++; return response; } catch (error) { if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { throw error; // 处理其他类型的错误 } } } ``` 如果想要中途停止这个特定的PUT请求，只需简单地调用控制器对象上的 abort 方法并提供可选的消息参数即可[^1]: ```javascript controller.abort('User manually stopped the upload'); ``` 通过这种方式可以在用户交互或其他逻辑条件下灵活控制HTTP请求的状态，从而提升用户体验和应用性能。

阅读全文