如今,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. WebSocket集成XMPP网页即时通讯1:Java Web Project服务端/客户端Jetty9开发初探

    Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...

  2. python并发编程之进程池,线程池concurrent.futures

    进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多, 这会对 ...

  3. Docker三剑客之Docker Machine

    一.什么是Docker Machine Docker Machine 是Docker官方编排项目之一,使用go语言编写的,使用不同引擎在多种平台上快速的安装Docker环境,开源地址:https:// ...

  4. POJ 2552

    #include<iostream> #include<stdio.h> using namespace std; ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ...

  5. Gen对于数组Array的处理

    举个例子,如下: public void t() { String[][] a = new String[][] { { "x", "y" } }; Strin ...

  6. [原创]EF架构随心所欲打造属于你自己的DbModel

    前言 我们都知道EF可以生成Dbmodel,系统生成的Model有时候并不是我们想要的,如何我们要生成自己的Model,那么久需要我们手动的去修改T4模版,T4是对“Text Template Tra ...

  7. vue实现短信验证码登录

    无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能 思路 1,先判断手机号和验证是否为空, 2,点击 ...

  8. 04 - JavaSE之异常处理

    异常的概念(运行期出现的错误) java 异常是 java 提供的用于处理程序中错误的一种机制. 所谓的错误是指在程序运行的过程中发生的一些异常事件.(如:除0溢出,数组下标越界,所要读取的文件不存在 ...

  9. spec 文件详解

    转自http://blog.sina.com.cn/s/blog_43b39e250100nnu4.html rpm软件包系统的标准分组:/usr/share/doc/rpm-4.3.3/GROUPS ...

  10. Linux 中计划任务-at-cron

    概念-计划任务:在某个时段自动执行某个任务  at:只执行一次 语法:at   时间 服务:atd   必须开启 如没有:yum install at -y 查看服务状态是否开启  systemctl ...