按顺序加载API请求(JavaScript)
按顺序加载API请求(JavaScript)
提问于 2019-03-09 16:47:30
我正在编写的脚本在for循环中进行了几次API调用。问题是有些API调用比其他API调用加载的时间要长，因此信息会按顺序加载到页面上。
例如，我将对对象1-8进行API调用，但它们将按以下顺序加载: 4、3、1、2、7、5、6、8
该守则基本上如下：
function loadData() {
for (var i = 0; i < 8; i++) {
$.getJSON("http://theapi.com/data" + i, function(data) {
var div = "<div>" + data + "</div>";
browserElement.innerHTML += div;
});
}
}
在第一个API调用完成之前，我如何强迫JavaScript不加载第二个API调用？
编辑：使用“承诺”链接API调用，结果在脚本中等待显示数据，直到所有数据都加载完毕。这不是一个理想的结果，因为如果有足够的数据，用户可能需要等待超过几秒钟才能看到任何东西。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-09 16:52:12
在循环中创建所有的div，然后在数据可用时填充它。
function loadData() {
for (var i = 0; i < 8; i++) {
let div = document.createElement("div");
browserElement.innerHTML += div;
$.getJSON("http://theapi.com/data" + i, function(data) {
div.innerHTML = data;
});
}
}Stack Overflow用户
发布于 2019-03-09 16:52:22
$.getJSON返回一个承诺，然后您可以await停止执行并得到结果：
async function loadData() {
for (let i = 0; i < 8; i++) {
const data = await $.getJSON("http://theapi.com/data" + i);
const div = "<div>" + data + "</div>";
browserElement.innerHTML += div;
}
}要将整个带宽挤出连接之外，您可以并行运行请求，然后立即显示div：
async function loadData() {
const promises = [];
for (let i = 0; i < 8; i++) {
promises.push($.getJSON("http://theapi.com/data" + i));
const result = await Promise.all(promises);
for(const data of result) {
const div = "<div>" + data + "</div>";
browserElement.innerHTML += div;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55079634
复制相关文章
相似问题
腾讯云开发者
