AbortController.abort(reason),但是reason在到达fetch catch子句之前就丢失了

2024-01-12

我正在实施可中止的获取调用 https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort.

中止我的页面上的提取基本上有两个原因:

  • 用户决定不再等待 AJAX 数据并单击按钮;在这种情况下,用户界面会显示一条消息“呼叫/任何中断”
  • 用户已移动到页面的另一部分,并且不再需要正在获取的数据;在这种情况下,我不希望用户界面显示任何内容,因为它只会让用户感到困惑

为了区分这两种情况,我打算使用reason的参数AbortController.abort方法,但我的 fetch 调用中的 .catch 子句总是收到一个DOMException('The user aborted a request', ABORT_ERROR).

我试图提供一个不同的DOMException https://webidl.spec.whatwg.org/#idl-DOMException作为情况 2 中止的原因,但差异丢失了。

有没有人找到如何将有关中止原因的信息发送到 fetch .catch 子句?


在下面的例子中,我演示了如何确定堕胎的原因fetch要求。我提供内嵌注释以进行解释。如果有任何不清楚的地方,请随时发表评论。

重新运行代码片段以查看(可能不同的)随机结果

'use strict';

function delay (ms, value) {
  return new Promise(res => setTimeout(() => res(value), ms));
}

function getRandomInt (min = 0, max = 1) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Forward the AbortSignal to fetch:
// https://docs.github.com/en/rest/repos/repos#list-public-repositories
function fetchPublicGHRepos (signal) {
  const headers = new Headers([['accept', 'application/vnd.github+json']]);
  return fetch('https://api.github.com/repositories', {headers, signal});
}

function example () {
  const ac = new AbortController();
  const {signal} = ac;

  const abortWithReason = (reason) => delay(getRandomInt(1, 5))
    .then(() => {
      console.log(`Aborting ${signal.aborted ? 'again ' : ''}(reason: ${reason})`);
      ac.abort(reason);
    });

  // Unless GitHub invests HEAVILY into our internet infrastructure,
  // one of these promises will resolve before the fetch request
  abortWithReason('Reason A');
  abortWithReason('Reason B');

  fetchPublicGHRepos(signal)
    .then(res => console.log(`Fetch succeeded with status: ${res.status}`))
    .catch(ex => {
      // This is how you can determine if the exception was due to abortion
      if (signal.aborted) {
        // This is set by the promise which resolved first
        // and caused the fetch to abort
        const {reason} = signal;
        // Use it to guide your logic...
        console.log(`Fetch aborted with reason: ${reason}`);
      }
      else console.log(`Fetch failed with exception: ${ex}`);
    });

  delay(10).then(() => console.log(`Signal reason: ${signal.reason}`));
}

example();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AbortController.abort(reason),但是reason在到达fetch catch子句之前就丢失了 的相关文章

  • 返回上一页

    我正在使用表格来 评价 页面 此表单将数据 发布 到其他地方的 php 脚本 我只是想在处理表单后显示一个链接 这将使用户返回到上一页 我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • 在自动完成上添加 jQuery 延迟

    我正在尝试为应用程序创建 jQuery 自动完成 search input on keyup function search this val autocomplete div autocomplete get ajax search se
  • Chrome 开发工具命中代码但未命中断点

    我在 chrome 开发工具上启用了断点 并且在一行上有一个断点 我知道 chrome 正在运行 因为我将断点放在具有以下语句的行上 alert why is this not breaking 如果我在本地主机中找到该文件 则断点有效 断
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • Node.js Express 4.0 中的 res.render 回调参数的用途是什么?

    目的是什么res render回调参数 在什么情况下 由于模板已被指定为第一个参数 因此人们会想要使用这样的回调参数 这是文档中的代码 send the rendered view to the client res render inde
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • 使用 # 时锚点 标签在 Chrome 中不起作用

    这是我在页面上使用的代码 li a href explore Sound Sound a li 在所有页面上出现的菜单中 a a 在我想要链接的页面上 我尝试过使用 id 将内容添加到标签中 但仅在 Chrome 中 浏览器不会向下滚动到该
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 如何使用 GreaseMonkey 让浏览器恢复“/”键?

    Lots of web pages seem to use the key for searching I d like to disable that because 100 of the time I want to use to se
  • jQuery 中什么函数相当于 .SelectMany()?

    让我解释一下 我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • 标记(Markdown)+ Mermaid(流程图和图表)

    努力去争取 美人鱼 https github com knsv mermaid https github com knsv mermaid跟 共事 标记 https github com chjj marked https github c
  • 如何获取符号名称(文字)?

    以下情况 var myVehicle brand Tesla var isMoving Symbol var currentStatus Symbol myVehicle isMoving true myVehicle currentSta
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当
  • 为什么 try catch 块没有捕获 Promise 异常?

    我对承诺的错误处理感到困惑 答案可能很明显 但我不明白 我有以下示例代码 var test async function throw new Error Just another error try test then catch err

随机推荐

  • 使用 extjs4 重用自定义组件

    我在 JavaScript 文件中创建了一个自定义网格 我想将它用作单独 js 文件中不同面板的 xtype 如果我在单个面板上使用它 它工作得很好 但是当我尝试同时在不同的面板上使用它时 我在 chrome 开发人员工具控制台中收到错误消
  • UDID 或 IMEI——哪个更好?

    在开发需要我唯一识别电话用户的应用程序时 我希望得到一些关于最好使用手机的 UDID 还是 IMEI 的建议 使用两者有什么优点 缺点吗 所有评论将不胜感激 ANDROID ID 的优点 设置 安全 ANDROID ID 这是设备首次启动时
  • Spring RestTemplate 中未找到 HttpMessageConverter

    当我使用 Spring RestTemplate 检索 JSON 时出现错误 错误说 Could not extract response no suitable HttpMessageConverter found for respons
  • 如何在 VSCode 的默认主题中自定义 Python 的文档字符串颜色?

    有人可以向我解释一下如何在 VSCode 的默认主题中自定义 Python 的文档字符串颜色吗 我想通过用户设置来完成此操作 因为希望能够保存我的配置文件 我尝试使用 editor tokenColorCustomizations 但它会影
  • 自定义损失函数 Keras Tensorflow

    我需要一个自定义加权 MSE 损失函数 我在 keras backend 中定义了它 from keras import backend as K def weighted loss y true y pred return K mean
  • mvn 命令未被识别为内部或外部命令

    我正在得到mvn命令未被识别为内部或外部命令 我已经设置了 M2 HOME JAVA HOME 并将 M2 HOME bin 添加到路径变量中 都是系统变量 仍然遇到同样的问题 回显变量向我显示正确的路径 Maven 路径 C apache
  • 如何下载整个CRAN存储库?

    对于没有互联网的离线 Linux 机器来说 安装具有大量依赖项的 R 包是一场噩梦 我在 SE 中发现了几篇帖子 讨论如何创建本地文件夹 复制所需的包 zip 文件以及使用 install packages 进行安装 然而 查找 下载大量包
  • AngularJS:如何将数据从指令传递到控制器函数

    我正在尝试将一些数据从指令传递到函数中addTrackFromPicker在我的控制器中 scope addTrackFromPicker function message console log addTrackFromPicker me
  • 如何将成员函数指针传递给 std::function

    如何将成员函数指针传递给std function通过一个函数 我将通过比较来解释它 现场测试 http ideone com Xjxt0B template
  • 以编程方式设置 derby.system.home

    需要将 JavaDB derby db 文件的数据库和日志文件移动到部署目录中 数据库在应用程序启动目录中工作 因为 JavaDB 创建了一个名为数据库名称的文件夹 在我的例子中为 mydb 但我想将该目录移动到名为 data create
  • 在 C++ 中重新定义 template

    我一直在寻找解决我的问题的方法 但似乎找不到 我正在使用 Code Blocks 并且收到模板类的重新定义错误 这是我的 vectorAux h 文件 ifndef vectoraux h define vectoraux h includ
  • 更改控件使用的默认系统字体

    我有一个大应用程序 需要更改字体 但我不想触摸每个标签 文本字段等 如何访问 IB 和中使用的 systemFont UIFont systemFontOfSize x 我已经尝试过这个 iOS 5 对 UIAppearance 感到好奇
  • 有理由使用 is 与 as 吗? [复制]

    这个问题在这里已经有答案了 当考虑is versus as在 C 中 您可以使用任一类型来确认一种类型是否可以转换为另一种类型 using is Employee e new Manager if e is Manager var m Ma
  • JBoss EAP 6 配置单个服务器以在域模式下进行远程调试

    我有域控制器 一个主机控制器和一台服务器在同一台计算机上运行 我正在使用 IDEA 连接到远程服务器进行调试 但即使它正在运行代码 它也不会在断点处停止 我已经通过系统输出进行了验证 我已启用HOST CONTROLLER JAVA OPT
  • Electron js Electron builder mac 构建在运行时打开空白屏幕,而在使用 npm start 运行时在开发中完美运行

    我已经在 Windows 和 ubuntu 中创建了内置应用程序 该应用程序运行正常 但是当在 mac 中构建时 构建已成功创建 但它只显示白色空白屏幕 没有渲染 html 页面 而当使用 npm start 运行时 它运行得很好 我只有
  • 检查变量是否为整数[重复]

    这个问题在这里已经有答案了 如何检查变量是否为整数 如果您需要这样做 请执行 isinstance
  • React Native导入包仅在Android上

    我正在尝试仅在 Android 上导入一个包 这里是任何人都知道这是否可能的包 import ProcessingManager from react native video processing 你有两种方法 第一种方式 您可以通过创建
  • SerialDevice.FromIdAsync() 产生一个空串行端口

    当尝试连接到串行端口时 我的代码发生了一些奇怪的情况 使用时系列样品 https developer microsoft com en us windows iot win10 samples serialsample 一切正常 第一次尝试
  • 电平与边缘触发网络事件机制

    对于边缘或电平触发的某些网络事件机制 即 epoll poll select 意味着什么 简而言之 边缘触发意味着只有在检测到事件时您才会收到通知 从概念上讲 事件发生在瞬间 而电平触发意味着每当事件存在时您就会收到通知 这将是真实的 一段
  • AbortController.abort(reason),但是reason在到达fetch catch子句之前就丢失了

    我正在实施可中止的获取调用 https developer mozilla org en US docs Web API AbortController abort 中止我的页面上的提取基本上有两个原因 用户决定不再等待 AJAX 数据并单