Polymer 1.0：有助于避免所有元素发出相同的 ajax 请求

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

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

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

Answer 2

你可以尝试使用iron-ajax的自动参数。它只会在值更改时发出请求。所以在这个例子中，如果令牌没有改变，将只有一个请求。我喜欢 Zikes 对你的问题的回应，你可以在 _tokenResponse 方法中做到这一点。

<dom-module is="elm1">
    <iron-ajax 
     auto
     url={{url}}
     on-response="_tokenResponse"></iron-ajax>
</dom-module>

<script>
    Polymer({
        is: "elm1",
        properties: {
            token:    String,
            url: {
             type:   String,
             computed:  '_url(token)'
            }
        },
        _url: function(token){
         return "someUrl" + token;
        },
        _tokenResponse: function(e, detail) {
            //do something with the response
        }
    });
</script>

Polymer 1.0：有助于避免所有元素发出相同的 ajax 请求

Polymer 1.0: Help to avoid all elements making same ajax request

javascript

ajax

polymer

polymer-1.0