语句没有在javascript中按顺序运行[重复]

Posted 2023-02-27

【中文标题】语句没有在javascript中按顺序运行[重复]

【英文标题】：Statements are not running sequentially in javascript [duplicate]

【发布时间】：2021-10-17 15:26:31

【问题描述】：

当我运行以下 searchSessionData 函数时，日志语句按以下顺序打印 - 1,3,4,5,2 而不是 1,2,3,4,5。

概览：

searchSessionData 基本上找到看不见的日期范围，然后使用该范围调用fetchData 函数，然后在控制台中打印。

fetchData 使用日期并获取数据并将它们全部推送到dataMap => it is a map 并返回数据

async function searchSessionData(sdate,edate)
    var data;
    // get range
    var unseenDates=getUnseenDates(new Date(sdate),new Date(edate));
    unseenDates.forEach( range => 
         fetchData(range.start,range.end);
    );
    // weave all data
    console.log(3);
    data=[];
    var allDatesinrange= getAllDates(new Date(sdate), new Date(edate));
    console.log(4);
    printElements(allDatesinrange);
    console.log(5);


// fetch data from the API and stores it to the hashmap
const fetchData = async(sdate='', edate='')=>
    try 
        // console.log('fetching...')
        var response;
        var data;

        // send requests to fetch data from api
        console.log(1);
        response = await fetch(`$APOD_url$api_key$startDate$sdate$endDate$edate`)
        currentDataIndex=0;
        data = await response.json();
        //if data is array, enter data to map for each entry
        // console.log(dataMap);
        data.forEach(async element => 
            await dataMap.set(element.date),element);
        );
        console.log(2);

        return data;
     catch (error) 
        console.log(error)
        return 
    

任何人都知道问题是什么以及如何解决？ 我不太确定，但我认为这可能是由于承诺。

【问题讨论】：

您没有显示足够的代码来重现问题。特别是 searchSessionData 永远不会在任何地方被调用（错误可能在调用站点）

虽然bug很可能是javascript - Using async/await with a forEach loop - Stack Overflow

我明白了。所以当你调用searchSessionData（明确写这部分！），记录的内容就是你在问题中写的？

好的，那么错误肯定是那个（而且你错过了 await 的 fetchData 函数调用）

@user202729 是的......我认为你是对的......感谢您将我链接到那个问题！

【参考方案1】：

你在两个地方做错了

fetchData 是一个async 函数，但您通常在searchSessionData 中调用它

.forEach 循环不适用于 async/await 组合，您在两个地方使用它。

要解决此问题并需要更改两个 .forEach 函数，如下所示：

for ( range of unseenDates ) 
     await fetchData(range.start,range.end);
;

---

for ( element of data ) 
    await dataMap.set(element.date),element);
;

---

如果循环中的函数不需要按顺序触发，您甚至可以考虑使用 await Promise.all 函数。

【参考方案2】：

而不是

    unseenDates.forEach( range => 
         fetchData(range.start,range.end);
    );

试试

    for (const range of unseenDates) 
         await fetchData(range.start,range.end);
    

【讨论】：

是的，我认为每个都与 for 相同。只是语法不同...但我错了...谢谢！ :)