Polymer 1.0：等待多个 Iron-ajax 请求完成答案

【问题标题】：Polymer 1.0: Wait for multiple iron-ajax requests to finishPolymer 1.0：等待多个 Iron-ajax 请求完成
【发布时间】：2016-12-12 17:04:08
【问题描述】：

我在页面上有多个 iron-ajax 标签，例如：

<iron-ajax
            auto
            id="ajaxCall1"
            url="/data/test1.json"
            handle-as="json"
            on-response="_myAjaxCall1ResponseHandler"
            last-response="{{_myAjaxCall1LastResponse}}"
            debounce-duration="300">
</iron-ajax>

<iron-ajax
            auto
            id="ajaxCall2"
            url="/data/test2.json"
            handle-as="json"
            on-response="_myAjaxCall2ResponseHandler"
            last-response="{{_myAjaxCall2LastResponse}}"
            debounce-duration="300">
 </iron-ajax>

如何等待两个请求都完成后再执行其他操作？我不在乎请求的顺序，只是它们都已完成。

谢谢。

【问题讨论】：

一种方法是使用标志。

标签： ajax promise polymer polymer-1.0

【解决方案1】：

观察多个属性仅在both become defined 时触发观察者。因此，如果您观察到绑定到last-response 的两个响应，它只会在两个请求都完成后触发。

Polymer({
  observers: [
    '_requestsFinished(_myAjaxCall1LastResponse, _myAjaxCall2LastResponse)'
  ],
  _requestsFinished: function(res1, res2) {
    // will only fire when res1 and res2 are non-undefined
  }
});

诀窍是在再次触发请求之前取消设置属性，以便观察者等待两者再次被定义。请参阅下面的 sn-p。

Polymer({
  is: 'my-elem',
  properties: {
    prop1: Object,
    prop2: Object,
    observer: {
      value: 'not fired'
    }
  },
  observers: [
    'observeBoth(prop1, prop2)'
  ],
  observeBoth: function(prop1, prop2) {
    console.log('observer');
    this.observer = 'fired';
  },
  set1: function() {
    console.log('prop1');
    this.prop1 = 'x';
  },
  set2: function() {
    console.log('prop2');
    this.prop2 = 'x';
  },
  unset: function() {
    this.prop1 = undefined;
    this.prop2 = undefined;
    this.observer = 'not fired';
  }
});

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body>
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      Observer: {{observer}}
      <br>
      <input type="button" value="set prop1" on-tap="set1" />
      <input type="button" value="set prop2" on-tap="set2" />
      <input type="button" value="unset props" on-tap="unset" />
    </template>
  </dom-module>

</body>
</html>

【讨论】：

这是否适用于同一调用的多个实例，例如 ajaxCall1 进行 5 次和 ajaxCall2 进行 3 次？
我不明白。你的意思是你只想在多次 ajax 调用后触发观察者？
是的，就像在您的回答中一样，观察者将在 1 ajaxCall1 和 1 ajaxCall2 之后触发，因为届时两个响应都将具有价值，但考虑 ajaxCall1 进行 5 次和 ajaxCall2 调用进行 7 次的情况，并且我想在所有 12 个呼叫完成后进行回调，我可以设置这样的回调吗？
我认为它已经足够具体了，您可能应该自己用一些计数器和一点逻辑来处理它。
计数器是一种我正在寻找解决所有承诺的东西，这可能是一个更干净的答案