聚合物 - 定期從API調用

Question

我已經寫了下面的自定義元素刷新數據：

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="shared-styles.html"> 

<dom-module id="my-voltage"> 
    <template is="auto-binding"> 
    <div class="circle">{{volts}}</div> 
    <div class="circle">{{time}}</div> 
    </template> 
    <script> 
    function httpGet(theUrl) 
    { 
     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.open("GET", theUrl, false); 
     xmlHttp.send(null); 
     return xmlHttp.responseText; 
    } 

    class MyVoltage extends Polymer.Element { 
     static get is() { 
     return "my-voltage"; 
     }  
     static get properties() { 
     return { 
      volts: { 
      type: String, 
      notify: true, 
      reflectToAttribute: true 

      }, 
     } 
     }  
     constructor() { 
     super(); 
      var volt = JSON.parse(httpGet('API_call')); 
      var voltage = volt.value.toString(); 
      var ts = volt.timestamp.toString(); 
      this.volts = voltage; 
      this.time = ts; 
     } 

    } 
    customElements.define(MyVoltage.is, MyVoltage); 

    </script> 
</dom-module> 

這通過API調用獲取數據，並顯示正確的負載。但是，我需要它定期刷新數據，而無需用戶重新加載整個頁面。我一直在閱讀文檔，但找不到解決方案。我到底需要將代碼定期調用API並獲取新數據？我怎樣才能做到這一點？

Answer 1

嗨XMLHttpRequest已棄用。您可以使用新的fetch api或使用Google的iron-ajax element。

Answer 2

您可以使用本機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毫秒）延遲之後一個新的請求。