Question

我正在尝试开发一个组件，它可以向不同的URL发出可变数量的AJAX请求。这是它的作用：

发出初步请求以获取用户所属的群组。
初始请求完成后，请为返回的每个组发出请求。请求的URL包括在对初始请求的响应中返回的组ID。
随着每个组请求的完成，以及组数据到数组属性。
完成所有组请求后，设置一个布尔属性，以便隐藏“加载”指示符。

这与jQuery很简单。您只需在步骤2中为每个组调用$ .ajax。对于步骤4，您将$ .ajax调用返回的所有Deferred对象传递给$ .whenAll。

很明显如何用铁-ajax做第1步。我正在寻找一个如何在Polymer中完成第2步和第4步的例子。我见过的所有iron-ajax示例都对URL的硬编码服务做了一个ajax请求。如何在运行时确定URL的可变数量的请求？

谢谢，丹尼斯

Answer 1

首先，我鼓励这条道路，你不仅限于以声明的方式使用Polymer。您可以使用fetch API和Promises轻松编写类似于$ .ajax的代码。基本上是window.fetch代替$.ajax和Promise.all而不是$.whenAll。

MDN表示它尚未标准化，但polyfill实施确实提供了稳定的解决方案。

如果您真的想使用iron-ajax，可以将其与动态值绑定，并在dom-repeat内迭代结果。

<iron-ajax url="[[groupsUrl]]" 
           auto 
           handle-as="json"
           last-response="{{userGroups}}"></iron-ajax>

<template is="dom-repeat" items="[[userGroups]] as="group">
  <iron-ajax url="/api/base/url/{{group.id}}" 
             auto
             on-response="handleGroup"></iron-ajax>
</template>

最后，在handleGroup函数中，您可以填充数组属性。但是，设置布尔加载标志将是icky。告诉所有请求已完成的唯一方法是计算handleGroup事件处理程序触发的时间。 Promise.all在这方面绝对是清洁的。

在Polymer中动态生成AJAX请求

1 个答案: