聚合物 Iron-ajax 间隔调用答案

【问题标题】：Polymer iron-ajax interval calls聚合物 Iron-ajax 间隔调用
【发布时间】：2016-05-26 11:43:58
【问题描述】：

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

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

ajax 在启动时被调用并且可以工作。每当我使用其他 Iron-ajax 发帖时，我都会调用 this.$.getAjax.generateRequest(); 并且它可以工作。

问题是，我怎样才能使用某种计时器来调用这个函数。这里的想法是使用 Iron-ajax 来“刷新”页面。我在how to do it on JQuery 上看到了一些答案，但我对聚合物属性、函数、内部函数、this.$ 等感到困惑。

【问题讨论】：

标签： javascript ajax polymer polymer-1.0

【解决方案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

【讨论】：

我在 Polymer json 中添加了 _updateData 函数（我用 this.$.getAjax 替换了 this.$.ajax，这是我的 iron-ajax 元素的 id。用这个在 ready 函数上调用它。我没有使用，因为我使用最后响应，但可以添加）
是的，我故意只打了两个电话，以便您了解如何使用async。通过将 _updateData 从 ready() 移动到 _onResponse() 可以轻松地将其修改为连续。我在示例中添加了响应处理程序，以证明收到了第二个响应。
我接受了你的回答。我希望您将最后一部分添加到答案中以供将来参考。谢谢！