如何在for循环中的下一次迭代之前等待承诺得到解决

Question

我有两个数据表，我想从中查询一些数据，所以我考虑的方法是提取url，并基于列表中的字段，我再次提取(url(，以从另一个数据表中获取相关数据，我想将它们附加在一起显示在浏览器上。这里的问题是for循环迭代不会等到上一次获取完成。我使用的是django_restframework，它试图通过url传递条件(变量(来获取数据。有人能帮忙吗？

var url = 'http://127.0.0.1:8000/creditor-detail/'+pmt_id+'/supplier/'+crm_spplier_id+'/'
var results = fetch(url)
.then((resp) => resp.json())
.then(function(item){ 
var list = item
for (var i in list){
getCustomer(list[i].customer_id)
.then(function test(user) {
return user[0].customer_name

});
var spmt = `
<tr id="data-row-${i}">
<td>${list[i].po_no}</td>
<td>${list[i].amount}</td>                  
<td>${I want return value[user[0].customer_name]}</td>
</tr>
`
wrapper.innerHTML+= spmt
}
})


function getCustomer(customer_id){
var url = 'http://127.0.0.1:8000/user-detail/'+customer_id+'/'
var results = fetch(url)
.then((resp) => resp.json())
.then(function(item){
return item       
})
return results
}

我已更改为：

function test() {
const url = 'http://127.0.0.1:8000/creditor-detail/'+pmt_id+'/supplier/'+crm_supplier_id+'/'
let promises = [];
const results = fetch(url)
.then(resp => resp.json())
.then(function (item) {
var list = item;

for (var i in list) {
promises.push(getCusotmer(list[i].customer_id));
console.log(list[i].customer_id)
}
})

Promise.all(promises)
.then((results) => {
console.log("All done", results);
})
.catch((e) => {

console.log(err)
});
}



function getCusotmer(customer_id) {

return new Promise((resolve, reject) => {
const url = 'http://127.0.0.1:8000/customer-detail/' + customer_id+ '/';
fetch(url)
.then(resp => resp.json())
.then((item) => resolve(item))
.catch((err) => {
console.log(err)

reject(err)
})
})
}
test();

控制台看起来是这样的：

全部完成[]长度：0_proto__：数组(0(14661663

我想，基于承诺逻辑，所有完成的事情最终都应该被阅读，我在这里错过了什么吗？

Answer 1

第一次很难理解，但我开始了。简单的答案是"；你不能那样做"，javascript使用"事件循环"，它就像一个包含javascript将要执行的所有任务的线程，当您使用"搜索"之类的异步任务时，它会因为异步而跳过"事件循环(。但是"for循环"不是异步的，因此它将在"Event循环"中进行处理。这意味着"fetch"将退出"Event Loop"，当其请求完成时，它将返回到"Event Loop"，此时，"for Loop"终止。

但别担心，你可以解决它，怎么解决？好吧，你可以迭代循环并保存一个新的promise数组，等待所有的promise都完成，然后在这一刻创建你的"tr"行

这是您的代码示例：第一个功能可能是这样的：

const promises = [];
fetch(url)
.then(resp => resp.json())
.then((item) => {
const list = item;
for (let i in list) {
promises.push(getCustomer(list[i].customer_id))
}
Promise.all(promises).then((resolveAllData) => {
//Do all that you need with your data
//Maybe you can use a for loop for iterate 'responseAllData
});
}).catch((err) => {
//manage your err
})

第二个函数可能是这样的：

function getCustomer(customer_id) {
return new Promise((resolve, reject) => {
const url = 'http://127.0.0.1:8000/user-detail/' + customer_id + '/';
fetch(url)
.then(resp => resp.json())
.then((item) => resolve(item))
.catch((err) => {
//manage your err
reject(err)
})
})
}

建议您了解JavaScript的工作原理及其异步性，尽量不要使用"var"，以获得更好的性能，并且范围没有问题