admin管理员组

文章数量:1318323

I have a simple Polymer frontend app. In it, I have simple ajax to get data from the backend:

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

The ajax gets called at startup and works. Whenever I POST using other iron-ajaxes I call this.$.getAjax.generateRequest(); and it works.

Question is, how can I call this function using some sort of timer. The idea here is to "refresh" the page using iron-ajax. I saw some answers on how to do it on JQuery, but I get confused with Polymers properties vs functions vs internal functions vs this.$ etc.

I have a simple Polymer frontend app. In it, I have simple ajax to get data from the backend:

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

The ajax gets called at startup and works. Whenever I POST using other iron-ajaxes I call this.$.getAjax.generateRequest(); and it works.

Question is, how can I call this function using some sort of timer. The idea here is to "refresh" the page using iron-ajax. I saw some answers on how to do it on JQuery, but I get confused with Polymers properties vs functions vs internal functions vs this.$ etc.

Share Improve this question edited May 23, 2017 at 12:18 CommunityBot 11 silver badge asked May 26, 2016 at 11:43 MathterMathter 7477 silver badges14 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

You would use Polymer's async() method, as described in the 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.

The following example defines _updateData() that asynchronously re-sends the AJAX request after 2 seconds. This could be called inside an on-response handler of <iron-ajax> so that the request is resent 2 seconds after every response.

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

Here's a working demo:

<head>
  <base href="https://polygit/polymer+1.11.1/ponents/">
  <script src="webponentsjs/webponents-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./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

本文标签: javascriptPolymer ironajax interval callsStack Overflow