javascript - 如何在 JavaScript 的循环中处理异步代码？

Question

我正在使用 Axios 在我的 ReactJS 应用程序中访问 SongKick 的 REST API。

我不知道我要发出多少请求，因为在每个请求中我可以获得的数据是有限的，所以在每个请求中我需要请求不同的页面。

为此，我使用了一个 for 循环，如下所示:

while (toContinue)
{
    axios.get(baseUrl.replace('{page}',page))
        .then(result => {
              ...
            if(result.data.resultsPage.results.artist === undefined)
                toContinue = false;
        });
    page++;
}

现在，我面临的问题是我需要知道我的所有请求何时完成。我知道 Promise.All，但为了使用它，我需要知道我将从中获取数据的确切 URL，而在我的情况下，我不知道它，直到我从请求中得到空结果，意味着最后一个请求是最后一个。

当然 axios.get 调用是异步的，所以我知道我的代码不是最优的，不应该这样写，但是我搜索了这种问题，没有找到一个合适的解决方案。

有什么方法可以知道函数内的所有异步代码何时完成？有没有另一种方法可以在不循环的情况下从 REST API 获取所有页面，因为使用我的代码会导致调用额外的请求(因为它是异步的)，尽管我得到的结果是空的？

Answer 1

实际上，您的代码会使引擎崩溃，因为 while 循环将永远运行，因为它永远不会停止，异步请求已启动但它们永远不会完成，因为线程被循环阻塞。

要解决这个问题，请使用 async/await 在继续循环之前等待请求，因此实际上循环不是无限的:

async function getResults() {
 while(true) {
   const result = await axios.get(baseUrl.replace('{page}', page));
   // ...
   if(!result.data.resultsPage.results.artist)
     break;
 }
}