如今,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. 传染病传播模型(SIS)Matlab代码

    function spreadingability=sir(A,beta,mu) for i=1:length(A) for N=1:50%随机次数 InitialState=zeros(length ...

  2. oracle 异常关闭操作 导致数据库无法正常关闭 也无法启动

    场景描述: 在关闭数据库的时候,命令没有打全,导致数据库没有正常关闭 解决办法: 重新建立个连接,然后切换到oracle用户 执行强制关闭数据库: OK 问题解决,不过生产环境 还是不推荐 shutd ...

  3. 十分钟内在Ubuntu系统上搭建Mono开发环境(Mono软件Ubuntu系统国内镜像源、Mono国内镜像源)

    Mono软件Ubuntu系统国内镜像源.Mono国内镜像源 http://download.githall.cn/repo 替换为国内源(非官方)有利于加快mono的安装速度,一般情况下,完成mono ...

  4. windows线程退出的方法

    线程的handle用处: 线程的handle是指向“线程的内核对象”的,而不是指向线程本身.每个内核对象只是内核分配的一个内存块,并且只能由内核访问.该内存块是一种数据结构,它的成员负责维护对象的各种 ...

  5. 源码分析篇 - Android绘制流程(三)requestLayout()与invalidate()流程及Choroegrapher类分析

    本文主要探讨能够触发performTraversals()执行的invalidate().postInvalidate()和requestLayout()方法的流程.在调用这三个方法到最后执行到per ...

  6. POJ 2083 Fractal 分形题目

    这两天自学了一线算法导论里分治策略的内容,秉着只有真正投入投入编程,才能更好的理解一种算法的思想的想法,兴致勃勃地找一些入门的题来学习. 搜了一下最后把目光锁定在了Poj fractal这一个题上.以 ...

  7. Ubuntu下安装qq方法及疑难问题解决

    在Ubuntu下安装qq有两种方法:.tar.gz包安装和.deb包安装下载地址:http://im.qq.com/qq/linux/download.shtml 方法一:.tar.gz包安装法 .t ...

  8. 30-hadoop-hbase-安装squirrel工具

    如果您的工作要求您在一天之中连接许多不同的数据库 (oracle.DB2.mysql.postgresql.Sql Server等等),或者你经常需要在多个不同种类的数据库之间进行数导入导出.那么SQ ...

  9. 各大APP注册时发送短信验证码是怎么实现的?

    第一步:获得验证码:1.找到相关的表.2.用什么发送,post,get ,ajax,当然ajax首选3.post之前要js先判断是手机号码11位,并且全部都是数字,或者用正则也行.4.用ajax发送数 ...

  10. Java并发编程-ReentrantLock源码分析

    一.前言 在分析了 AbstractQueuedSynchronier 源码后,接着分析ReentrantLock源码,其实在 AbstractQueuedSynchronizer 的分析中,已经提到 ...