聚合物铁ajax间隔呼叫

Question

我有一个简单的Polymer前端应用程序。 在其中，我有一个简单的ajax从后端获取数据：

<iron-ajax id="getAjax"
  auto
  url="http://localhost:14039/InvoiceService/envelop/{{envelopId}}/invoices"
  handle-as="json"
  last-response="{{invoices}}">

Ajax在启动时被调用并工作。 每当我使用其他铁ajax进行发布时，我都将其命名this.$.getAjax.generateRequest(); 而且有效。

问题是，如何使用某种计时器调用此函数。 这里的想法是使用Iron-ajax“刷新”页面。 我在JQuery上看到了一些有关如何执行此操作的答案，但是我对Polymers属性vs函数vs内部函数vs this。$等感到困惑。

Answer 1

您将使用Polymer的async()方法，如docs中所述：

async(method, [wait]) 。 异步调用method 。 如果未指定等待时间，则以微任务计时运行任务（在当前方法完成之后，但在处理事件队列中的下一个事件之前）。 返回可用于取消任务的句柄。

cancelAsync(handle) 。 取消已标识的异步任务。

以下示例定义了_updateData() ，该方法在2秒后异步重新发送AJAX请求。 可以在<iron-ajax> on-response处理器中调用此函数，以便在每次响应后2秒重新发送请求。

Polymer({
  is: 'x-foo',
  _updateData: function() {
    this.async(function() {
      this.$.ajax.generateRequest();
    }, 2000);
  },
  _onResponse: function() {
    this._updateData();
  }
});

这是一个工作示例：

 <head> <base href="https://polygit.org/polymer+1.11.1/components/"> <script src="webcomponentsjs/webcomponents-lite.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> <iron-ajax id="ajax" auto url="//jsonplaceholder.typicode.com/users/" last-response="{{data}}" on-response="_onResponse" handleAs="json"> </iron-ajax> <table> <template is="dom-repeat" items="[[data]]"> <tr> <td>[[item.id]]</td> <td>[[item.name]]</td> <td>[[item.email]]</td> </tr> </template> </table> <div> <sup>See console log</sup> </div> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-foo', _updateData: function() { this.async(function() { this.$.ajax.generateRequest(); }, 2000); }, _onResponse: function() { console.log('received response'); this._updateData(); } }); }); </script> </dom-module> </body>

^jsbin

聚合物铁ajax间隔呼叫

问题描述

1 个解决方案

解决方案1
9 已采纳 2016-05-26 15:32:00

聚合物铁ajax间隔呼叫

问题描述

1 个解决方案

解决方案1 9 已采纳 2016-05-26 15:32:00

解决方案1
9 已采纳 2016-05-26 15:32:00