Polymer Eisen-Ajax Intervall Anrufe

Ich habe eine einfache Polymer-Frontend-App. Darin habe ich einfachen Ajax, um Daten aus dem Back-End zu erhalten:Polymer Eisen-Ajax Intervall Anrufe

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

Der Ajax wird beim Start aufgerufen und funktioniert. Immer wenn ich andere Eisen-Ajaxen POST benutze, rufe ich this.$.getAjax.generateRequest(); an und es funktioniert.

Frage ist, wie kann ich diese Funktion mit einer Art Timer aufrufen. Die Idee hier ist, die Seite mit Eisen-Ajax zu "aktualisieren". sah ich ein paar Antworten auf how to do it on JQuery, aber ich verwirrt mit Polymers Eigenschaften vs Funktionen vs internen Funktionen vs diese $ usw.

Quelle

2016-05-26 Mathter

Sie async() Methode Polymers verwenden würde, wie in der docs beschrieben.

async(method, [wait]). Ruft method asynchron auf. Wenn keine Wartezeit angegeben ist, werden Tasks mit Mikrotask-Timing ausgeführt (nachdem die aktuelle Methode abgeschlossen ist, aber bevor das nächste Ereignis aus der Ereigniswarteschlange verarbeitet wird). Gibt ein Handle zurück, mit dem die Aufgabe abgebrochen werden kann.

cancelAsync(handle). Bricht die angegebene asynchrone Aufgabe ab.

Das folgende Beispiel definiert _updateData() die asynchron die AJAX Anfrage nach 2 Sekunden erneut sendet. Dies könnte innerhalb eines on-response Handlers von <iron-ajax> aufgerufen werden, so dass die Anfrage 2 Sekunden nach jeder Antwort erneut gesendet wird.

Polymer({ 
    is: 'x-foo', 
    _updateData: function() { 
    this.async(function() { 
     this.$.ajax.generateRequest(); 
    }, 2000); 
    }, 
    _onResponse: function() { 
    this._updateData(); 
    } 
});

Hier ist eine Arbeits Demo:

<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

Quelle

2016-05-26 15:32:00 tony19

ich die _updateData Funktion Polymer json hinzugefügt (I ersetzt das $ Ajax mit diesem... $ .getAjax, was die ID meines Iron-Ajax-Elements ist, nannte es auf der Ready-Funktion mit this._up dateData() und mit chrome kann ich sehen, wie der Anruf zweimal ausgelöst wird, sobald er fertig ist, und nach zwei Sekunden. Das Gleiche gilt für Ihre Probe. Ist es erforderlich, den On-Response-Handler erneut async aufzurufen? (was ich nicht verwende, da ich die letzte Antwort verwende, aber hinzugefügt werden kann) – Mathter

Ja, ich habe absichtlich nur zwei Anrufe getätigt, so dass Sie sehen konnten, wie man 'async' verwendet. Es könnte leicht modifiziert werden, um kontinuierlich gemacht zu werden, indem _updateData von ready() in _onResponse() verschoben wird. Ich hatte in meinem Beispiel den On-Response-Handler hinzugefügt, um zu zeigen, dass eine zweite Antwort empfangen wurde. – tony19

Ich habe deine Antwort angenommen. Ich möchte, dass Sie diesen letzten Teil der Antwort für zukünftige Referenzen hinzufügen. Vielen Dank! – Mathter

Antwort

Verwandte Themen