Javascript-如何在for循环中使用fetch并等待结果

Question

我是异步函数的新手，我正在尝试动态创建一个无序列表(ul(，其中包含每个li中带有子span元素的列表项(li(。span包含来自mongodb的信息。我希望for循环在继续之前等待每次迭代的结果。如何修改它以适应获取的异步操作？

提前谢谢。

$('.add').on("input", function() {
var table = document.getElementById("table").getElementsByTagName('tbody')[0];
//Input text
var searchInput = this.value;
var searched_ul = document.getElementById('searched_ul');
fetch("______",{
}).then(response => {
return response.json();
}).then(data => {
for(var i=0; i<data.length; i++){
if(capitalizeFirstLetter(data[i].name).startsWith(capitalizeFirstLetter(searchInput)) && searchInput != ''){
var searched_li = document.createElement('li');
searched_li.innerHTML = data[i].name;
//Outputs all the names from the for loop as expected, but fetch only does last item
console.log("NAME", data[i].name);
//Span child element containing info
var dep_span = document.createElement('span');
//Add css class for styling
dep_span.classList.add('dep-span');
fetch("_______" + data[i].d,{
}).then(response => {
return response.json();
}).then(depData => {
dep_span.innerHTML = depData.name;
//Outputs li and span for last item in for loop (i times)
console.log("LI: ", searched_li);
//Append span to li
searched_li.appendChild(dep_span);
});

searched_li.addEventListener("click", function(e){
});
searched_ul.append(searched_li);
}
}
}).catch(function(err){
console.log(err);
});
});

Answer 1

可能重复：如何在for循环中使用fetch，等待结果，然后console.log it

您需要将启动循环的函数设置为async，然后您可以在后续调用中使用wait来等待获取完成，而不必使用then。

在你的情况下，它将类似于：

fetch("______", {})
.then((response) => {
return response.json();
})
.then(async (data) => {
for (var i = 0; i < data.length; i++) {
//...
const res = await fetch("_______" + data[i].d, {});
const depData = await res.json();
dep_span.innerHTML = depData.name;
//...
}
});

工作示例：https://jsfiddle.net/9sdwefyv/34/

Answer 2

每次提取中都有两个异步进程，首先是http请求，然后是转换为json，按照这个顺序，您可以等待两个进程中的每一个，并将数据保存在这样的变量中：

const fatherData = (await (await fetch("______", {})).json())

@TarunKumar提供了另一种具有相同结果的方法，他允许异步fatherRequest，但等待每个child的请求。只要做更适合你需要的事。

将单独等待每个响应的示例如下：

document.getElementsByClassName('add').addEventListener('keyup', ev => searchData(ev));
const searchData = async (ev) => {
const searchInput = ev.target.value;
const searched_ul = document.getElementById('searched_ul');
const fatherData = (await (await fetch("______", {})).json())
for (const son of fatherData) {
if (capitalizeFirstLetter(son.name).startsWith(capitalizeFirstLetter(searchInput)) && searchInput != '') {
let searched_li = document.createElement('li');
searched_li.innerHTML = son.name;
let dep_span = document.createElement('span');
dep_span.classList.add('dep-span');
let sonData = (await (await fetch("______" + son.d, {})).json())
dep_span.innerHTML = sonData.name;
searched_li.appendChild(dep_span);
searched_li.addEventListener("click",  evLi => {
console.log('li clicked')
});
searched_ul.append(searched_li);
}
}
}