本文共 2035 字，大约阅读时间需要 6 分钟。
在前端开发中，HTTP请求的取消是非常重要的一项功能。尤其是在单页应用(SPA)中，由于页面跳转频繁，及时取消未完成的请求能够提升用户体验。以下将详细介绍几种常用方法，包括fetch、axios、jquery等如何实现HTTP请求的取消。
在现代前端应用中，HTTP请求的取消主要有以下两种场景：
页面跳转时：当用户从一个页面跳转到另一个页面时，如果前一个页面的HTTP请求尚未完成（例如AJAX请求），我们希望能够取消该请求，避免资源浪费或状态不一致。
长时间操作时：对于耗时较长的操作（如上传、下载等），如果用户希望中途取消操作，对应的HTTP请求也需要被取消以确保及时性和用户体验。
Fetch是ES6引入的一种新的API，用于发起HTTP请求。与传统的XMLHttpRequest不同，Fetch默认不支持取消请求的功能，但可以通过AbortController实现。
创建AbortController实例：
const controller = new AbortController();
在fetch中使用信号：
fetch('https://jackniu81.github.io', { signal: controller.signal }).then(response => { console.log('获取数据成功');}).catch(err => { if (err.name === 'AbortError') { console.log('请求已被取消'); } else { console.log('请求失败，错误信息：', err); }});取消请求：
controller.abort();
AbortController可以用于一次性终止多个请求。AbortController，但需要注意IE浏览器的兼容性问题。Axios是一款流行的HTTP客户端库，支持通过cancelToken实现请求取消。
创建取消源：
const source = axios.CancelToken.source();
在请求中传递取消源：
axios.get('https://jackniu81.github.io', { cancelToken: source.token}).catch(err => { if (axios.isCancel(err)) { console.log('请求已被取消'); } else { console.log('请求失败，错误信息：', err); }});主动取消请求：
source.cancel('Abort Request');AbortController，axios内部已实现取消功能。Jquery作为一个功能强大的前端库，也内置了请求取消的功能。
.abort()方法：$.ajax({ url: 'https://jackniu81.github.io', type: 'GET', dataType: 'json', success: function(data) { console.log(data); }, error: function(err) { console.log('请求失败'); }});// 假设需要取消当前请求：$request.abort();.abort()即可取消请求。在前端开发中，HTTP请求的取消是确保良好用户体验的重要环节。以下是几种常用方法的总结：
Fetch与AbortController集成：
signal属性传递给fetch，可实现请求取消。AbortController支持一次性终止多个请求。Axios默认支持取消功能：
cancelToken传递取消源，主动调用source.cancel()即可终止请求。Jquery内置取消功能：
.abort()可取消当前请求。优化建议：
AbortController以实现集中管理。通过合理使用这些方法，可以在前端开发中实现HTTP请求的取消，提升应用的性能和用户体验。
转载地址：http://ultfz.baihongyu.com/