如今,Fetch API已经成为现在浏览器异步网络请求的标准方法,但Fetch也是有弊端的,比如: Fetch还没有方法终止一个请求,而且Fetch无法检测上传进度

现在我们可以通过 AbortControllerAbortSignal 来终止,代码如下:

const controller = new AbortController()

const signal = controller.signal

fetch('./data.json', { signal })

可以通过controller.abort()来通知终止事件,比如,你可以在请求发出后3秒来终止请求

setTimeout(() => { controller.abort(); }, 3 * 1000);

如果请求完成了,调用absort()不会发生错误

如果请求没有完成,那么Fetch就会抛出一个DOMException异常,异常的name属性值为"AbortError",可以在promise中的catch捕获这个异常

例如:  fetch('./data.json', { signal })

.then((res) => {})

.catch((err) => {

if (err.name === 'AbortError') {

console.log('Fetch aborted');

} else {

console.log('Another error');

}

})

取消Fetch API请求的更多相关文章

  1. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  2. ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...

  3. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  4. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  5. 如何取消一个 Ajax 请求

    如何取消一个 Ajax 请求 jQuery XMLHttpRequest.abort() https://stackoverflow.com/questions/446594/abort-ajax-r ...

  6. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  7. Ajax新玩法fetch API

    目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...

  8. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  9. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

随机推荐

  1. django 之 发送邮箱

    发送邮箱的话首先在settings文件里写下边的这些设置: #邮件服务配置文件 SSL认证,验证 EMAIL_USE_SSL = True #邮箱服务 EMAIL_HOST = 'smtp.qq.co ...

  2. Django-cookie的保存以及删除操作

    Django里的保存cookie和flask是有区别的 今天我就说以下Django里的cookie操作 #先导包 #导入Django模块 from django.http import HttpRes ...

  3. 实验1 C语言开发环境使用和数据类型、运算符、表达式

    ♦ 实验结论 PART 1 验证性内容 问题: 1.结尾没有加“:”时回车到下一行的时候再输入下一行的语言首字对齐方式会发生变化,可以对上一行进行检查. (这一点需要在不同软件里面试一下,在机房里的软 ...

  4. Oracle修改日志归档模式、归档路径以及空间大小的相关测试

    ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...

  5. C#:WebBrowser控件的使用教程及相关问题整理

    推荐阅读: C#WebBrowser控件使用教程与技巧收集--苏飞收集 C# WebBrowser强制在本窗口打开,禁止在新窗口打开 C# WebBrowser禁止在新窗口打开,强制在本窗口打开(多种 ...

  6. 手把手教你整合最优雅SSM框架

    我们看招聘信息的时候,经常会看到这一点,需要具备 SSM 框架的技能, SpringMVC 可以完全替代 Struts,配合注解的方式,编程非常快捷,而且通过 restful 风格定义 url,让地址 ...

  7. Mac系统配置JDK1.8环境变量

    1.首先我们得知道JDK目录安装在哪里,按照下面的路径我们可以找到JDK的主目录,如下图所示.这里有两个目录是因为本机较早前安装过早期版本的JDK1.8. /Library/Java/JavaVirt ...

  8. jQuery实用Demo

    1.点击 隐藏/显示 元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. Python虚拟环境工具-Virtualenv 介绍及部署记录

    在开发Python应用程序时,系统默认的Python版本可能会不兼容这个应用程序, 如果同时开发多个应用程序, 可能会用到好几个版本的python环境, 这种情况下,每个应用可能需要各自拥有一套&qu ...

  10. Go控制语句

    指针 Go虽然保留了指针,但是与其他编程语言不通的是,在Go当中不支持指针运算以及"->"运算符,而是直接采用"."选择符来操作指针目标对象的成员. 操作 ...