使用 for 循环时，如何等待一次提取完成后再开始另一次提取？

Question

我正在遍历一个包含多个对象的数组，对于每个对象，我想进行一次提取，这应该 return 基于当前对象信息的时间预测。然后我想将这个时间添加到在循环外声明的时间变量。在下面的示例中，数组中有两个对象。第一个对象 returns 时间为 34，第二个对象 returns 时间为 72。但是，当我检查时间时，它总是只有 72。因此，我认为第一个对象可能没有完成在第二个开始之前。代码如下所示：

for (var l = 0; l < journeyArr.length; l++){
                        console.log("time at start of loop: ", time)
                        startStop = journeyArr[l].stops[0].id
                        endStop = journeyArr[l].stops[journeyArr[l].stops.length - 1].id 
                        routeid = journeyArr[l].routeid
                        lineid = journeyArr[l].lineid
                        fetch("http://localhost:8000/routes/api/predict/?lineid="+lineid+"&start_stop="+startStop+"&end_stop="+endStop+"&routeid="+routeid+"&time_secs="+seconds+"&temp="+temp+"&rain=0.16&dow="+dayNum)
                        .then(response => {
                            return response.json()
                        })
                        .then(data => {
                            time += data.journey_info.journey_time.hours * 60
                            time += data.journey_info.journey_time.minutes
                        })
                    }
                    //Timeout just after the for loop to fetch times and to calculate
                    setTimeout(()=>{
                        var hours = Math.floor(time / 60);  
                        var minutes = time % 60;
                        timeLeft.innerHTML = hours + " hour(s) " + minutes + " minutes";
                     },10000)

Answer 1

你必须在 for loop 中声明你的变量，否则你会一直覆盖它们的值而只有最后一个。

所以替换：

startStop = journeyArr[l].stops[0].id
endStop = journeyArr[l].stops[journeyArr[l].stops.length - 1].id 
routeid = journeyArr[l].routeid
lineid = journeyArr[l].lineid

与 :

const startStop = journeyArr[l].stops[0].id
const endStop = journeyArr[l].stops[journeyArr[l].stops.length - 1].id 
const routeid = journeyArr[l].routeid
const lineid = journeyArr[l].lineid

Answer 2

在这种情况下，您可以使用 async/await。将您的代码放入一个异步函数中，并通过调用该函数来触发获取。

let fetchData = async () => {
    let time = 0;
    for (var l = 0; l < journeyArr.length; l++){
        console.log("time at start of loop: ", time)
        startStop = journeyArr[l].stops[0].id
        endStop = journeyArr[l].stops[journeyArr[l].stops.length - 1].id 
        routeid = journeyArr[l].routeid
        lineid = journeyArr[l].lineid
        const response =  await fetch("http://localhost:8000/routes/api/predict/?lineid="+lineid+"&start_stop="+startStop+"&end_stop="+endStop+"&routeid="+routeid+"&time_secs="+seconds+"&temp="+temp+"&rain=0.16&dow="+dayNum)
        const data = response.json()
        time += data.journey_info.journey_time.hours * 60
        time += data.journey_info.journey_time.minutes
    }
    //Timeout just after the for loop to fetch times and to calculate
    setTimeout(()=>{
        var hours = Math.floor(time / 60);  
        var minutes = time % 60;
        timeLeft.innerHTML = hours + " hour(s) " + minutes + " minutes";
    },10000)
}

fetchData() // Trigger the fetch loop

使用 for 循环时，如何等待一次提取完成后再开始另一次提取？

How do I wait for one fetch to be finished before starting another fetch when using a for loop?

javascript

fetch

async-await

es6-promise