Question

我写了以下自定义元素：

pandas

这通过API调用获取数据并在加载时显示。但是，我需要它定期刷新数据，而无需用户重新加载整个页面。我一直在阅读文档，但找不到解决方案。我究竟需要将代码定期调用API并获取新数据？我怎样才能做到这一点？

Answer 1

您可以使用原生setTimeout： setTimeout(() => this.someMethod(), 500);

此外，<iron-ajax>将允许您轻松发出ajax请求（docs）。

示例结果：

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-voltage">
  <template>
        <iron-ajax id="ajax"
                   auto
                   url="api/call"
                   last-response="{{data}}"
                   on-response="_onResponse"
                   handle-as="json">
        </iron-ajax>
        <div class="circle">[[data.value]]</div>
        <div class="circle">[[data.timestamp]]</div>
    </template>
  <script>
    class MyVoltage extends Polymer.Element {
      static get is() {
        return "my-voltage";
      }

      static get properties() {
        return {
          data: Object
        };
      }

      _onResponse() {
        setTimeout(() => this.$.ajax.generateRequest(), 5000);
      }
    }
    customElements.define(MyVoltage.is, MyVoltage);
  </script>
</dom-module>

此处，_onResponse()在每次响应后被调用，并在5秒（5000毫秒）延迟后创建一个新请求。

Answer 2

不推荐使用XMLHttpRequest。您可以使用新的fetch api或Google使用iron-ajax element。

Polymer - 定期刷新API调用中的数据

2 个答案: