javascript - Polymer iron-ajax 间隔调用

标签 javascript ajax polymer polymer-1.0

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

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

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

问题是,我如何使用某种计时器调用此函数。这里的想法是使用 iron-ajax 来“刷新”页面。 我在 how to do it on JQuery 上看到了一些答案,但我对 Polymers 属性、函数、内部函数、this.$ 等感到困惑。

最佳答案

您将使用 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 请求。这可以在 on-response 中调用<iron-ajax> 的处理程序以便在每次响应后 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

关于javascript - Polymer iron-ajax 间隔调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37459936/

相关文章:

jquery - JWT token 与 jQuery Ajax

javascript - 从 javascript 访问 dom-if 内的 dom-repeat

css - 在不同的文件夹中时,无法让共享样式在 Polymer 中工作

javascript - 使用node.js调用同一目录中的文件时出错

javascript - 如何使用各自的纬度和经度值计算两个地方之间的距离?

javascript - d3 饼 : redraw label on path change

javascript - 输入字段的 Ajax 代码就像 Gmail 的 to Field 一样

javascript - 在javascript中调用ajax函数

javascript - polymer 中是否有 'window.onload' 的替代品?

javascript - 无法让 Bootstrap 3 JavaScript 工作