如今,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. Windows上安装tensorflow 详细教程

    原博客转载自:https://www.cnblogs.com/lvsling/p/8672404.html 一, 前言:本次安装tensorflow是基于Python的,安装Python的过程不做说明 ...

  2. 【rocketMQ】1、搭建MQ服务器,生产一个订单与消费一个订单

    1. 先解压 2. maven编译安装.(注意虚拟机采用nat网络模式,需要联网) mvn -Prelease-all -DskipTests clean install -U 启动nameser节点 ...

  3. socket http tcp udp ip 协议

    Socket可以支持不同的传输层协议(TCP或UDP),当使用TCP协议进行连接时,该Socket连接就是一个TCP连接. socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作 ...

  4. Hadoop和Apache Spark的异同

    谈到大数据,相信大家对Hadoop和Apache Spark这两个名字并不陌生.但我们往往对它们的理解只是提留在字面上,并没有对它们进行深入的思考,下面不妨跟我一块看下它们究竟有什么异同. 1.解决问 ...

  5. android开发学习——day6

    关于UI的几个插件学习 button和textview,以及点击button利用Toast提醒,editText private EditText editText; @Override protec ...

  6. Android初识Helloworld

    在Eclipse+ADT中创建HelloWorld非常简单,直接按照导航下一步就可以了.本文重点不在如何创建,而在理解HelloWorld项目的文件. HelloWorld的目录结构有: src:存放 ...

  7. Maven内置属性,pom属性

    内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ba ...

  8. 02 - JavaSE之基础及面向对象(补充)

    引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...

  9. Python学习--08函数式编程

    函数式编程的一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数. 高阶函数 Python支持高阶函数(Higher-order function). 什么是高阶函数呢?把函数作为参 ...

  10. 大佬带你深入浅出Lua虚拟机

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 作者:郑小辉 | 腾讯 游戏客户端开发高级工程师 写在前面:本文所有的文字都是我手工一个一个敲的,以及本文 ...