聚合物铁-ajax区间调用

Question

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

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

ajax 在启动时被调用并工作。每当我 POST 使用其他 iron-ajaxes 时，我调用 this.$.getAjax.generateRequest(); 并且它有效。

问题是，如何使用某种计时器调用此函数。这里的想法是"refresh"页面使用iron-ajax。我在 how to do it on JQuery 上看到了一些答案，但我对 Polymers properties vs functions vs internal functions vs this.$ 等感到困惑

Answer 1

您将使用 Polymer 的 async() 方法，如 docs:

中所述

async(method, [wait]). Calls method asynchronously. If no wait time is specified, runs tasks with microtask timing (after the current method finishes, but before the next event from the event queue is processed). Returns a handle that can be used to cancel the task.

cancelAsync(handle). Cancels the identified async task.

下面的例子定义了 _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区间调用

Polymer iron-ajax interval calls

javascript

ajax

polymer

polymer-1.0