使用一个 Iron-ajax 元素处理多个请求

2024-03-04

理论上来说,应该可以使用一个iron-ajax通过设置多个请求的元素auto属性,然后重复设置url元素上的属性。iron-ajax有一个属性叫做activeRequests,这是一个只读数组,因此它似乎支持同时对多个请求进行排队。但实际上它似乎不起作用。

例如,在下面的 JS Bin 中,我检索包含单词的书籍的书籍 ID 列表polymer,然后使用for循环重复设置值url.

<!doctype html>
<html>
<head>
  <meta name="description" content="single iron-ajax for multiple requests">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-ajax/iron-ajax.html" rel="import">
</head>
<body>
  <dom-module id="my-el">
    <template>
      <iron-ajax id="ajax"
                 url="https://www.googleapis.com/books/v1/volumes?q=polymer"
                 handle-as="json"
                 on-response="onResponse"
                 last-response="{{response}}" auto></iron-ajax>
    </template>
    <script>
      Polymer({
        is: 'my-el',
        properties: {
          response: {
            type: Object,
            notify: true
          }
        },
        onResponse: function(e) {
          var ajax = this.$.ajax;
          var originalUrl = 'https://www.googleapis.com/books/v1/volumes?q=polymer';
          var url = ajax.lastRequest.xhr.responseURL;
          if (url.includes(originalUrl)) {
            console.log('this is the first request');
            for (var i = 0; i < ajax.lastResponse.items.length; i++) {
              ajax.url = this.url(ajax.lastResponse.items[i].id);
            }            
          } else {
            console.log(ajax.lastResponse.selfLink);
          }
        },
        url: function(id) {
          return "https://www.googleapis.com/books/v1/volumes/" + id;
        }
      });
    </script>
  </dom-module>
  <my-el></my-el>
</body>
</html>

确实可以用iron-ajax对于多个请求,但不包括auto启用,否则你会遇到iron-ajax's 去抖动器 https://github.com/PolymerElements/iron-ajax/blob/bcdb5d3/iron-ajax.html#L496。来自聚合物文档用于iron-ajax https://elements.polymer-project.org/elements/iron-ajax:

With auto set to true,该元素每当其url, params or body属性被改变。如果连续更改多个属性,自动生成的请求将被反跳。

在你的问题的代码中:

// template
<iron-ajax auto ...>

// script
onResponse: function(e) {
  ...
  for (var i = 0; i < ajax.lastResponse.items.length; i++) {
    ajax.url = this.url(ajax.lastResponse.items[i].id);
  }
}

……你想必正在期待iron-ajax对每个 URL 生成一个新请求,但是debouncer 将请求合并为一个 https://github.com/Polymer/polymer/blob/6c5afe5/src/mini/debouncer.html#L22-L32(仅取最后一次调用)。

另外值得注意的是:response处理程序的事件详细信息(即e.detail) 对应的是iron-request,其中包含 AJAX 响应(即e.detail.response)。最好使用事件详细信息,因为它可以避免同时请求中的竞争条件iron-ajax, where this.$.ajax.lastResponse or this.$.ajax.lastRequest被异步覆盖。

onResponse: function(e) {
  var request = e.detail;
  var response = request.response;
}

重复使用iron-ajax使用新 URL,禁用auto(这会禁用去抖动器)并手动调用generateRequest()更新网址后。这将允许多个同时异步请求(并且activeRequests将填充多个请求)。

// template
<iron-ajax ...>   <!-- no 'auto' -->

// script
onResponse: function(e) {
  var request = e.detail;
  var response = request.response;
  ...
  for (var i = 0; i < response.items.length; i++) {
    ajax.url = this.url(response.items[i].id);
    ajax.generateRequest();
  }
},
ready: function() {
  this.$.ajax.generateRequest(); // first request
}

这是您的代码的修改版本:

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <!-- We're reusing this iron-ajax to fetch more data
         based on the first response, and we don't want
         iron-ajax's debouncer to limit our requests,
         so disable 'auto' (i.e., remove the attribute
         from <iron-ajax>). We'll call generateRequest()
         manually instead.
      -->
    <iron-ajax id="ajax"
               url="https://www.googleapis.com/books/v1/volumes?q=polymer"
               handle-as="json"
               on-response="onResponse"
               on-error="onError">
      </iron-ajax>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          onError: function(e) {
            console.warn('iron-ajax error:', e.detail.error.message, 'url:', e.detail.request.url);
          },
          onResponse: function(e) {
            var ajax = this.$.ajax;
            var originalUrl = 'https://www.googleapis.com/books/v1/volumes?q=polymer';
            var url = e.detail.url;
            if (url.includes(originalUrl)) {
              var books = e.detail.response.items || [];
              console.log('this is the first request');
              for (var i = 0; i < books.length && i < 3; i++) {
                ajax.url = this.url(books[i].id);
                console.log('fetching:', ajax.url);
                ajax.generateRequest();
              }
            } else {
              var book = e.detail.response;
              console.log('received:', e.detail.url, '"' + book.volumeInfo.title + '"');
            }
          },
          url: function(id) {
            return "https://www.googleapis.com/books/v1/volumes/" + id;
          },
          ready: function() {
            // generate first request
            this.$.ajax.generateRequest();
          }
        });
      });
    </script>
  </dom-module>
</body>

https://jsbin.com/qaleda/edit?html,控制台 https://jsbin.com/qaleda/edit?html,console

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

使用一个 Iron-ajax 元素处理多个请求 的相关文章

  • Angular2 模板解析错误:嵌入模板上的任何指令均未使用属性绑定 ngFor

    这是 Angular2 模板
  • 聚合物服务和服务人员

    我正在尝试开始调试我的聚合物应用程序 我通过复制我的想法手工制作了它PolymerCLI Polymer init does 我不确定正在加载服务人员的是什么 开发的默认选项只做了一个console info 打电话说它已被禁用以进行开发
  • 聚合物输入变化事件

    我想要的只是能够从聚合物元素 获取输入并在更改时发出警报 而无需创建自定义聚合物元素 问题 on change 不执行任何操作 我怀疑 this value 会做任何事情 伪代码
  • 如何以声明方式将禁用/选中等伪布尔属性绑定到布尔值?

    有没有一种简单的方法来绑定属性 例如disabled or checked真 假属性 就像是
  • KnockoutJS + Polymer:绑定中断(Chrome 之外)

    编辑 这仅出现在 Chrome 之外 我使用 KO 来使用 foreach 绑定填充元素 另一方面 我加载了 Polymer 以利用 Google 的 Material Design 样式 问题是 platform js 文件 Polyme
  • Polymer:什么时候使用异步?

    目的是什么async聚合物中的方法 我应该什么时候使用它 现在我用它就像嗯 这个错误有点奇怪 也许异步会修复它 是的 id did yey 当我洒水时 它并没有给我对我的代码有任何信心async就在出现一些计时错误时 根据您使用的是 Pol
  • 聚合物和 PHP

    你好 我刚刚开始学习聚合物 我使用 PHP 收集数据如下 我可以将其嵌入到 DIV 中并显示一些数据 但我想将这段代码放入带有我可以导入的参数的 Polymer 元素中 并将 json 数据也放入我可以用来填充页面的外部 Polymer 元
  • 带 dom-repeat 的 Polymer 1.0 动态模板

    我有一个场景 我想创建动态template将与 Polymer 一起使用的元素dom repeat 我当前的原型如下 JSbin演示 http jsbin com hitotahoqe edit js output var domRepea
  • Polymer 中的横向通信

    问题是这样的 任何两个聚合物元素都可能需要通信 没有假设这些元素可能位于 DOM 或影子 DOM 中的位置 这意味着一个事件不能简单地冒泡到另一个元素 实现这一点的好旧方法是让事件冒泡到根节点 然后触发播送根节点上的事件供其他元素监听 然而
  • 当从 dom-repeat 函数设置时,属性更改未反映在 UI 中 - Polymer

    我有对象数组和属性 我的 dom repeat 结构如下所示
  • Polymer 2.0:通知并反映到属性

    我是这个框架的新手 希望看到一些有用且简单的通知和反映属性属性的示例 请保持示例简单或为您提供的任何代码添加解释 Notify 可以设置为 True False 假设你有parent element and child element 工作
  • 如何在 Polymer 1.0 中过滤铁列表?

    The dom repeat元素提供了一个filter属性 有没有类似的过滤方法iron list 例如 给定一个人员列表 我想过滤出生在特定城市的人 As iron list不幸的是不提供filter属性 没有声明性模式使这成为可能 您可
  • 如何在聚合物模板中转义大括号 {{var}}?

    如何在 Polymer 模板中转义大括号 我已经将这两个建议视为建议 但它们都抛出 无效的表达式语法 错误 var var 怎么样 var 似乎有效
  • 选择带有 JavaScript 和/或 CSS 的 Shadow DOM?

    Chrome 似乎已被弃用 deep and gt gt gt and shadow https www chromestatus com features 6750456638341120 https www chromestatus c
  • 聚合物全局变量

    我正在开发一个 Polymer 应用程序 它从 RESTful API 中提取数据并使用它来构建界面 我在概念上坚持的一个特定领域是单态模式的实现 描述于http www polymer project org docs polymer p
  • 具有核心动画页面和长列表的聚合物芯片到卡图案

    一般来说 我发现很难使用core animated pages当我有一个滚动页面的很长列表时 聚合物元素可实现芯片列表到卡片类型模式 我认为困难在于 一旦过渡完成 隐藏部分就会从布局中取出 我很难找到解决这个问题的方法 简单的插图 JSFi
  • PhpStorm 资源根的相对路径

    我使用 PhpStorm 9 并且我的项目结构与此类似 src elements element alfa element alfa html element alfa scss templates application html ind
  • 是否可以在 React 中使用 Polymer?

    我一直在使用 React 并希望在 React 中使用 Polymer 标签 React 无法识别 Polymer 标签 因为 React 仅处理基本 DOM 标签 有没有办法将 Polymer 标签添加到 React DOM 库 对的 这
  • 获取纸张下拉菜单的选定值

    我用的是聚合物paper dropdown menu https www polymer project org 0 5 docs elements paper dropdown menu html作为我的项目的下拉菜单 现在 当用户从下拉
  • 对聚合物发布的属性感到困惑

    我已经深入研究了聚合物的ajax核心元素 如下代码工作正常

随机推荐

  • 删除 struts 2 中的转换验证消息或使其通用

    在我的 struts2 应用程序中 我有一个名为 CarrierNo 的字段 它接受整数 当我将字符串放入其中时 会给出以下验证错误消息 Invalid field value for field carrierNo 我可以像这样在属性文件
  • 有没有一种简单的方法来计算两个数组之间的差异[重复]

    这个问题在这里已经有答案了 我正在尝试计算 Swift 中两个数组中值之间的差异 我想减去两个数组之间每个索引处的值 我尝试执行以下操作 var array1 Double 1 2 3 4 5 var array2 Double 2 3 4
  • 存储过程的命名约定是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 GitHub 上使用 Laravel 包的 PR?

    当我想在 GitHub 上对 Laravel 包发出拉取请求时 我会按以下方式进行操作 创建新的 Laravel 项目 需要并安装包 从供应商文件夹中的项目中删除附加文件 Fork GitHub 并将文件克隆到项目文件夹中 更改打包并测试所
  • AJAX DJango 从多个文件字段获取文件

    我正在使用 AJAX 和 DJango 进行多个文件上传 但遇到问题 如何从字段输入获取文件并将其推送到data HTML
  • NLTK 使用语料库标记西班牙语单词

    我正在尝试学习如何使用 NLTK 标记西班牙语单词 来自NLTK书 http nltk org book ch05 html 使用它们的示例来标记英语单词非常容易 因为我对 nltk 和所有语言处理都很陌生 所以我对如何进行感到非常困惑 我
  • 在 Java 中分割命令行

    在 Java 中解析类似 shell 的命令行的推荐方法是什么 我的意思并不是说在选项已经处于数组形式时处理选项 例如处理 x 等 已经有很多关于此的问题和答案 不 我的意思是把完整的命令字符串分割成 令牌 我需要转换一个字符串 例如 us
  • 如何在 django 模板中减去两个 datetime.time 值,以及如何将持续时间格式化为小时、分钟

    在 django 应用程序中 我发送了一个列表Entry对象到模板 每个Entry对象有一个开始时间和结束时间 它们是 datetime time 值 从TimeFields在表单上 在列出条目对象时 我需要显示每个条目的持续时间 在模型中
  • 将 UserControl 序列化为 xaml,但不序列化其子控件?

    NET 4 0 中的 XAML 序列化堆栈进行了相当多的更改 其中一项更改是 当序列化 UserControl 时 您不仅可以获得控件本身 还可以获得其所有子控件 var sb new StringBuilder var writer Xm
  • 创建链接服务器和数据库别名

    我有两台服务器 Server1 和 Server2 在两台服务器上我都有一个名为 QAI 的数据库 有没有一种方法可以创建一个链接服务器 其别名从 Server2 到 Server1 而不是 服务器1 QAI dbo tbBlah 将其别名
  • 使用 Windows 调度程序运行 jar 文件

    我有 jar 文件 我想从 Windows 7 中的 Windows 调度程序运行该文件 我已经给出了路径java exe在路径 脚本中和 jar c abc ab jar在参数字段中 但它不运行 我也曾在bat文件的帮助下尝试过 但它无法
  • Bash:在 OS X 下查找字符串中字符的位置

    有没有办法找到字符串中第一个字符的位置Bash under Mac OS X 就像是 stringZ abcABC123ABCabc 6 echo expr index stringZ C12 C position 如中所述高级 Bash
  • 如何在 Python 中重新运行代码?

    我有这个单词解扰器游戏 仅在 CMD 或 python shell 中运行 当用户正确或错误地猜测单词时 它会显示 按任意键再次播放 我怎样才能让它重新开始 在评估用户的输入后不要让程序退出 相反 在循环中执行此操作 例如 一个甚至不使用函
  • CSS:在同一行有3个div,中间的div占据剩余空间

    我正在构建一个工具栏 我希望以下示例中的黄色部分占据整个左侧空间 白色 http jsfiddle net MWjGH 1 http jsfiddle net MWjGH 1 div class left Some content div
  • 一起运行 Tkinter 窗口和 PysTray 图标

    我正在构建一个 tkinter gui 项目 并且正在寻找使用 tkinter 窗口运行托盘图标的方法 我发现 Pystray 库可以做到这一点 但现在我正在尝试弄清楚如何将这个库 托盘图标 与 tkinter 窗口一起使用 我设置了当用户
  • 如何使用 OpenPyXL 设置带标题的列格式

    我正在尝试以日期格式设置某些列的格式 我能够使用以下命令成功更改单个单元格的格式 date style Style number format M D YYYY ws E7 style date style 但是除了标题之外 是否有更简单的
  • 由各种分隔符分割,同时保留分隔符?

    我想分割文本 过公元年 因为无论你如何选择 简体字危及了对古代文学的研究输入 使用这三个 或更多 字符作为分隔符 我当然可以这样做 lines preg split u body 但是我不想让结果行保留其结束分隔符 一个句子也可能这样结束啊
  • 如何检查 Bigquery 上列表的某个项目是否在另一个列表项目中?

    我有一个专栏 比如 11999999999 12999999999 31999999999 和另一列 例如 5511777777777 5512888888888 5531999999999 我想做一个CASE WHEN如果第一列上的任何项
  • model.fit 上的尺寸数量错误

    我正在尝试运行这个 SimpleRNN model add SimpleRNN init uniform output dim 1 input dim len pred frame columns model compile loss ms
  • 使用一个 Iron-ajax 元素处理多个请求

    理论上来说 应该可以使用一个iron ajax通过设置多个请求的元素auto属性 然后重复设置url元素上的属性 iron ajax有一个属性叫做activeRequests 这是一个只读数组 因此它似乎支持同时对多个请求进行排队 但实际上