admin管理员组

文章数量:1318146

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.

  • javascript
  • ajax
  • polymer
  • polymer-1.0
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

版权声明：本文标题：javascript - Polymer iron-ajax interval calls - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742045252a2417746.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。