javascript - polymer 1.0 : Help to avoid all elements making same ajax request

Question

我的场景:我有多个看起来像这样的元素

<dom-module is="elm1">
    <iron-ajax id="ajax"></iron-ajax>
</dom-module>

<script>
    Polymer({
        is: "elm1",

        properties: {
            token: {
                type: String,
                observer: "_tokenChanged"
            } 
        },

        _tokenChanged: function() {
            this.$.ajax.url = "someUrl" + this.token;
            this.$.ajax.generateRequest();
        }
    });
</script>

现在想象一下我在页面上说了 10 个这样的内容。

<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>
<elm1 token="123456"></elm1>

需要对同一端点进行 10 次单独的调用。如何将其合并为一个请求，然后可以在元素之间共享？

我的问题是我有太多元素进行太多相同的 ajax 调用来获取完全相同的数据。这损害了我们的表现...

Answer 1

首先，包含 iron-meta包含 AJAX 调用结果的元素。在您的 tokenChanged 函数中，在触发 AJAX 请求之前检查 iron-meta 的内容。如果数据存在，请使用它，如果没有，请检查第二个 iron-meta 元素以查看它是否包含 iron-ajax Promise。如果是这样，该 Promise 将返回 AJAX 请求的结果，如果不是，那么您可以触发 AJAX 请求并将结果 Promise 相应地存储在第二个 iron-meta 中。

请注意，两个 iron-meta 键都应包含 token 值，以避免与使用不同值的 elm1 实例发生冲突。