javascript - 更改 Javascript 同步

Question

我有一个名为 dataCollect 的函数，它可以在一个 API 中收集数据。我需要在每次调用之间间隔 1 秒，因为 API 在很小的时间空间内无法响应许多调用。

我还有一个名为 centerArray 的数组，其中包含我必须传递给 API 的数据，并且每次交互我都会传递不同的数据。

我做了一个 Promise，当完成循环收集 API 数据时，它在控制台中显示一条消息“完成”，也就是说，我的代码保持同步。但这并没有发生，“完成”消息以异步方式出现，然后终止交互。

const listMakers = () => {
        const callback = (resolve, reject) => {
            centerArray.forEach((element, idx) => {
                setInterval(() => {
                    dataCollect(element)
                }, 1000);
            });
        }
        return new Promise(callback)
    }

    listMakers().finally(console.log('finish'))

function dataCollect(location) {
        markerArray= [];
        var request = {
            location: location,
            radius: raio,
            type: ['restaurant']
        }

        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, function(results, status) {

           if (status == google.maps.places.PlacesServiceStatus.OK) {
              markerArray.push(results)
           }
        })
        return markerArray;
}

Answer 1

如果我理解您的问题正确，您希望以 1 秒的间隔进行 API 调用，并确定是否所有调用都已完成。

代码中的主要错误是以下部分:

centerArray.forEach((element, idx) => {
                setInterval(() => {
                    dataCollect(element)
                }, 1000);
            });

这里您期望 forEach 的回调将以给定的时间间隔执行。但这不是异步代码在 JS 中的工作方式，例如使用 .forEach 或 .map 。在这种情况下，数组将同步迭代，并且所有回调立即启动。为了解决这个问题，我建议您遵循以下代码结构:

// some array with your data
const centerArray = [1,2,3,4,5,6,7,8,9,10];

//waiting function that can be awaited
const wait = (ms = 1000) => new Promise(resolve => setTimeout(resolve, ms));

// your asynchronous method that returns Promise
// it can be an API call like axios(url), in your case it is just dataCollect(), 
// i dont know if you do some async stuff in this method or not
const doRequest = requestNumber => new Promise(resolve => {
    console.log(`${requestNumber} request done`);
    resolve();
});

// you need to use old good "for of" instead of "forEach"
// marking this method with "async" makes it return Promise
const run = async () => {
    for (const i of centerArray) {
        await doRequest(i);
        // or await collectData();  
        await wait();
    }
};
run().then(() => console.log("all done"));

运行代码查看输出:

1 request done
...
10 request done
all done

编辑:现在我可以看到你的 dataCollect 方法和另一个重要错误:

function dataCollect(location) {
     ...
     service.nearbySearch(request, function(results, status) {
           // you need to wait for this callback
           if (status == google.maps.places.PlacesServiceStatus.OK) {
              markerArray.push(results)
           }
        })
     return markerArray; //this executes immediately 
}

像上面的 doRequest 示例一样重写方法，以便您可以等待它:

async function dataCollect(location) {
     return new Promise(resolve => {
          ...
          service.nearbySearch(request, function(results, status) {
               if (status == google.maps.places.PlacesServiceStatus.OK) {
                   markerArray.push(results)
                }
               resolve(markerArray);
          })
     }
}