前端进阶（2）使用fetch/axios时， 如何取消http请求

最新推荐文章于 2024-07-07 10:10:45 发布
最新推荐文章于 2024-07-07 10:10:45 发布
阅读量6.5k 收藏
点赞数
分类专栏： 前端进阶 Web前端 Javascript 文章标签： web 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288714/article/details/116130158
版权
本文介绍了在前端开发中，当使用fetch和axios时如何取消HTTP请求。在需求场景如页面跳转或用户取消操作时，取消请求是必要的。fetch虽然不直接支持abort操作，但可以通过AbortController实现。而axios和jQuery的ajax已经内置了取消请求的功能。
摘要由CSDN通过智能技术生成

前端进阶（2）使用fetch/axios时， 如何取消http请求

文章目录

1. 需求

现在前端都是SPA，我们什么时候需要取消HTTP请求呢？

  1. 当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的请求
  2. 某些操作耗时比较长（不能是保存等操作哦），如果用户不想等待呢，取消了操作，对应我们也需要取消HTTP请求

对于原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()
那么，当我们使用ES6的fetch，或者使用axios库，如何实现呢？

2. Fetch 取消http请求

fetch与XMLHttpRequest(XHR)类似，是ES6之后浏览器（除IE之外）默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现， 直接上代码：

// 声明AbortController
const controller = new AbortController();

// 正常的http调用
fetch('https://jackniu81.github.io', {
最低0.47元/天 解锁文章
Jack N
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】fetch和axios发送请求
weixin_51290060的博客
02-03 1682
axios和fetch向后端发送请求
axios取消http请求
qiaoguoqing的专栏
08-28 399
//取消http请求 let source = axios.CancelToken.source() //声明一个source对象 axios.get('/data.json',{ cancelToken:source.token //在接口请求时将这个声明的对象放到方法中，以便下一步取消 请求时使用 }).then(res=>{ console.log(res) /...
fetch取消请求
qq_42931285的博客
08-22 259
fetch取消请求
axios取消请求功能CancelToken原理解析
最新发布
qq_38229938的博客
07-07 931
取消请求的需求平时出现的场景不是很多，估计有一部分小伙伴并没有使用过，这里就简单的介绍一下用法} else {// 处理错误});}, {})// 取消请求（message 参数是可选的）
Axios取消请求
qq_35260673的博客
04-13 1501
使用Axios取消请求来优化tab跳转的体验
取消fetch请求
张鹏~IT~少年人的博客
09-22 479
原理： 结合AbortController构造器，实现请求取消操作。 const abortController = new AbortController(); const { signal } = abortController; fetch('http://localhost:8999/api/list', { signal }) .then(res => res.json()).then(res => { // 正常业务操作 }).catch(e => { i
Axios取消请求：AbortController
席木木的博客
01-22 2017
Axios取消请求：AbortController，介绍如何结合AbortController接口实现取消Axios调用后端API过程中发生的重复性请求，可根据实际需要对示例代码进行修改/使用。
Next.js脚手架进阶 — 封装fetch && 增加中间件
weixin_33923148的博客
12-10 1890
Next.js脚手架进阶系列 完美契合ant-design 封装fetch && 增加中间件 部署上线 封装fetch 首先先来说一下为什么要用fetch而不是axios吧，主要有以下两点： 第一，我在另一个脚手架express-react-scaffold里使用的就是axios,秉着学习新东西的想法，想自己封装一下fetch。 第二，个人觉得fetch的功能更为强大，因为f...
初识Axios：前端网络请求的利器
它是一个现代化且功能丰富的网络请求库，广泛应用于前端开发中。 ## 1.1 什么是Axios Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 Node.js 环境中。它具有以下特性： - 从浏览器中创建 ...
fetch和axios的区别
05-23
fetch 和 axios 都是用于在前端发送网络请求的工具，它们之间的主要区别如下： 1. fetch 是浏览器原生提供的 API，而 axios 是第三方库，需要引入后使用。 2. fetch 默认不会携带 cookie，需要手动设置；而 axios ...
Vue进阶（二十）： 请求方式详解_vue 请求
2401_84447362的博客
04-29 324
注意：支持在中使用。这样通过请求就无需通过安装依赖库来实现。具体使用： 4.3.2 表单通过 fetch 发送 ajax 请求 注意⚠️：如果是提交表单元素，那么一定要添加参数， 而且的值必须是。 4.3.3 通过 vuex 请求数据 中对应的: 通过实现请求，发送请求可以不用带，和等参数。HTTP 缓存你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？HTTP 常用的请求方式，区别和用途？HTTPS 是什么？具体流程三次握手和四次挥手你对 TCP 滑动窗口有了解嘛？W
取消 Fetch 请求很简单
前端先锋
04-15 5016
JavaScript 的 promise一直是该语言的一大胜利——它们引发了异步编程的革命，极大地改善了 Web 性能。原生 promise 的一个缺点是，到目前为止，还没有可以取消 fetch 的真正方法。 JavaScript 规范中添加了新的 AbortController，允许开发人员使用信号中止一个或多个 fetch 调用。
fetch取消频繁请求
weixin_48420104的博客
04-16 579
在前端开发中，取消频繁的请求是一个常见的需求，尤其是在用户输入搜索关键词时，我们希望避免在每次按键时都发送请求，从而减轻服务器的压力并提升用户体验。： 防抖是一种限制函数频繁执行的技巧，只有当一定时间内没有新的执行请求时，才会执行函数。如果你的应用程序使用了状态管理工具（如Vuex或Redux），你可以在状态管理器中管理请求的状态，并在需要时取消请求。或其他HTTP库发送请求时，你可以存储请求的引用，并在发送新请求前取消之前的请求。这段代码将确保只有在用户停止输入300毫秒后，才会发送一次搜索请求。
JS 基础: 取消 Ajax 请求(fetch abort)
超悠閒的博客
10-30 1354
fetch API 提供的取消请求代码实现，以及前端请求取消、时序问题的讨论与思考
fetch和axios取消请求方法
weixin_40618102的博客
04-11 148
【代码】fetch和axios取消请求方法。
简单易懂：Axios 如何取消请求的两种方法
LiamHong_的博客
12-06 8716
通过使用Axios提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例。
CancelToken——取消请求
huacheng0394的博客
09-06 4991
应用于连续请求时候，第二次请求早于第一次请求
Axios/fatch发送请求后取消请求,React中使用AbortController
一个前端工程师
09-15 803
React中使用AbortController，来中断请求
在Axios中，如何使用async/await来处理HTTP请求
05-29
在 Axios 中使用 async/await 来处理 HTTP 请求，需要使用到 ES7 中的 async/await 关键字。async/await 是一种异步编程的语法糖，可以让异步代码看起来更像同步代码，从而提高代码的可读性和可维护性。 Axios 默认返回的是 Promise 对象，可以使用 async/await 来处理 Promise 对象的返回值。以下是一个使用 async/await 处理 Axios HTTP 请求的示例： ```javascript async function fetchData() { try { const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1') console.log(response.data) } catch (error) { console.error(error) } } fetchData() ``` 在这个例子中，`fetchData` 函数使用 async 关键字声明为异步函数，使用 await 关键字等待 Axios 的 get 方法返回的 Promise 对象。当 Promise 对象被 resolve 后，await 表达式将会返回 Promise 对象的 resolve 值，即请求成功后的响应结果。如果请求出现错误，catch 语句将会捕获错误并进行处理。 需要注意的是，使用 async/await 处理 Axios HTTP 请求，需要在函数前面添加 async 关键字，使用 await 关键字等待 Promise 对象的返回值。同时，需要使用 try/catch 语句来处理请求出现的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值