[Javascript] AbortController to cancel the fetch request

We are able to cancel the fetch request by using AbortController with RxJS Observable.

return Observable.create(observer => {
  // Create an AbortController to able to cancel the fetch request
  const controller = new AbortController();
  // we need singal to pass to the fetch request
  const signal = controller.singal;
  // Pass the singal in fetch options
  fetch(url, { singal })
    .then(response => {
      return response.json();
    })
    .then(body => {
      observer.next(body);
      observer.complete();
    })
    .catch(err => {
      observer.error(err);
    });
  // When comsumer call sub.unsubscribe(), it will call abort()
  // to cancel the request.
  return () => controller.abort();
});

原文地址:https://www.cnblogs.com/Answer1215/p/9275003.html

时间: 2024-10-20 14:11:53

[Javascript] AbortController to cancel the fetch request的相关文章

调度 engine._next_request_from_scheduler() 取出request交给handler,结果是request,执行engine.craw(),结果是resp/fail,下一步看scraper.enqueue_scrape()

0.def _next_request_from_scheduler(self, spider): C:\Program Files\Anaconda2\Lib\site-packages\scrapy\core\engine.py def _next_request_from_scheduler(self, spider): slot = self.slot request = slot.scheduler.next_request() #首先从优先级队列取出一个 request if not

使用 Fetch完成AJAX请求

使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般使用jQuery的ajax方法: $.ajax('some-url', { success: (data) => { /* do something with the data */ }, error: (err) => { /* do something when an error happen

JS Fetch

使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); 这里我们通过网络获取一个JSON文件并将其打印到控制台.最简单的用法是只提供一个参数用来指明想fetch()

使用 Fetch

原文 https://www.cnblogs.com/libin-1/p/6853677.html 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般使用jQuery的ajax方法: $.ajax('some-url', { success: (data) => { /* do something with the data */ }, error: (err) => { /* do so

[转] 传统 Ajax 已死,Fetch 永生

原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定.结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的. 由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程.旧浏览器不支持 Promis

fetch API

一.什么是fetch? fetch的作用类似于XMLHttpRequet的作用,用于异步请求网络,其提供的API更加的完善. fetch提供了Request和Response对象的定义,用于自定义网络请求和处理响应消息,兼容性 还不是很强. 二.如何使用fetch? fetch提供一系列的API,如下: GlobalFetch: 包括fetch()方法用于获取资源 Headers: 表示response/request的消息头 Request: 用于请求资源 Response: 一个reques

React Native探索(五)使用fetch进行网络请求

前言 React Native可以使用多种方式来进行网络请求,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法. 1.get请求 fetch API是基于 Promise 设计的,因此了解Promise也是有必要的,推荐阅读MDN Promise教程 . get请求访问淘宝IP库 我们先从最基础的get请求开始,get请求的地址为淘宝IP地址库,里面有访问接口的说明.请求代码如下所

传统 Ajax 已死,Fetch 永生

原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定.结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的. 由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程.旧浏览器不支持 Promis

(转)JavaScript判断浏览器类型及版本

IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE.而IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)        Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)        Mozilla/