确实可以用iron-ajax
对于多个请求,但不包括auto
启用,否则你会遇到iron-ajax
's 去抖动器 https://github.com/PolymerElements/iron-ajax/blob/bcdb5d3/iron-ajax.html#L496。来自聚合物文档用于iron-ajax https://elements.polymer-project.org/elements/iron-ajax:
With auto
set to true
,该元素每当其url
, params
or body
属性被改变。如果连续更改多个属性,自动生成的请求将被反跳。
在你的问题的代码中:
// template
<iron-ajax auto ...>
// script
onResponse: function(e) {
...
for (var i = 0; i < ajax.lastResponse.items.length; i++) {
ajax.url = this.url(ajax.lastResponse.items[i].id);
}
}
……你想必正在期待iron-ajax
对每个 URL 生成一个新请求,但是debouncer 将请求合并为一个 https://github.com/Polymer/polymer/blob/6c5afe5/src/mini/debouncer.html#L22-L32(仅取最后一次调用)。
另外值得注意的是:response
处理程序的事件详细信息(即e.detail
) 对应的是iron-request
,其中包含 AJAX 响应(即e.detail.response
)。最好使用事件详细信息,因为它可以避免同时请求中的竞争条件iron-ajax
, where this.$.ajax.lastResponse
or this.$.ajax.lastRequest
被异步覆盖。
onResponse: function(e) {
var request = e.detail;
var response = request.response;
}
重复使用iron-ajax
使用新 URL,禁用auto
(这会禁用去抖动器)并手动调用generateRequest()
更新网址后。这将允许多个同时异步请求(并且activeRequests
将填充多个请求)。
// template
<iron-ajax ...> <!-- no 'auto' -->
// script
onResponse: function(e) {
var request = e.detail;
var response = request.response;
...
for (var i = 0; i < response.items.length; i++) {
ajax.url = this.url(response.items[i].id);
ajax.generateRequest();
}
},
ready: function() {
this.$.ajax.generateRequest(); // first request
}
这是您的代码的修改版本:
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.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>
<!-- We're reusing this iron-ajax to fetch more data
based on the first response, and we don't want
iron-ajax's debouncer to limit our requests,
so disable 'auto' (i.e., remove the attribute
from <iron-ajax>). We'll call generateRequest()
manually instead.
-->
<iron-ajax id="ajax"
url="https://www.googleapis.com/books/v1/volumes?q=polymer"
handle-as="json"
on-response="onResponse"
on-error="onError">
</iron-ajax>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
onError: function(e) {
console.warn('iron-ajax error:', e.detail.error.message, 'url:', e.detail.request.url);
},
onResponse: function(e) {
var ajax = this.$.ajax;
var originalUrl = 'https://www.googleapis.com/books/v1/volumes?q=polymer';
var url = e.detail.url;
if (url.includes(originalUrl)) {
var books = e.detail.response.items || [];
console.log('this is the first request');
for (var i = 0; i < books.length && i < 3; i++) {
ajax.url = this.url(books[i].id);
console.log('fetching:', ajax.url);
ajax.generateRequest();
}
} else {
var book = e.detail.response;
console.log('received:', e.detail.url, '"' + book.volumeInfo.title + '"');
}
},
url: function(id) {
return "https://www.googleapis.com/books/v1/volumes/" + id;
},
ready: function() {
// generate first request
this.$.ajax.generateRequest();
}
});
});
</script>
</dom-module>
</body>
https://jsbin.com/qaleda/edit?html,控制台 https://jsbin.com/qaleda/edit?html,console