使用 Async/Await 获取数据时遇到问题

Question

您好，我正在尝试获取一个国家/地区的数据，之后我想获取其邻国的名称。

import React from 'react';

export default function DetailsRoute({ match }) {

    const [countryData, setCountryData] = React.useState({});
    const [borderCountries, setBorderCountries] = React.useState([]);

    React.useEffect(() => {
        fetchCountryData();
    }, [])

    const fetchCountryData = async () => {
        /* fetch country by Name */
        const response = await fetch(`https://restcountries.eu/rest/v2/name/${match.params.country}`);
        const fetchedData = (await response.json())[0];

        setCountryData(fetchedData);

        const neighbors = [];

        /* Extract 'alphaCode' for each bordered country and fetch its real name */

        fetchedData.borders.forEach(async (alphaCode) =>  {

            const response = await fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`);
            const fetchedNeighbor = await response.json();

            neighbors.push(fetchedNeighbor.name);
        });

        /* THIS DOESN'T WAIT FOR NEIGHBORS TO BE FILLED UP */
        setBorderCountries(neighbors);
    }

    
    return (
        <article>
            <h1>{countryData.name}</h1>
            {borderCountries.map(countryName => <h2>{countryName}</h2>)}
        </article>
    )
}

如您所见，setBorderCountries(neighbors) 不会异步运行。但我不知道如何让它等待forEach() 循环完成。

在stackoverflow的某个地方，我看到Promise.all()并尝试实现它，但我真的不知道它在语法上是否正确-

Promise.all(
    fetchedData.borders.forEach(async (alphaCode) => {

    const response = await fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`);
    const fetchedNeighbor = await response.json();

    neighbors.push(fetchedNeighbor.name);
    })
)
.then(() =>
    setBorderCountries(neighbors)
)

我的问题是如何让setBorderCountries(neighbors) 等到forEach() 循环填满neighbors？

也许对我的代码有一些建议的优化？

Answer 1

forEach 循环立即结束，因为等待（仅）发生在回调中，但这些回调都是同步调用的，因此 forEach 在任何等待的承诺解决之前完成。

改为使用普通的for 循环：

for (let alphaCode of fetchedData.borders) {

现在该循环内的 await 是顶级 async 函数的一部分，因此它可以按您的预期工作。

您也可以考虑使用Promise.all，如果可以接受无需等待前一个解决就可以创建promise。然后你可以等待Promise.all 的结果。在您尝试这样做时，您没有将任何内容传递给Promise.all，因为forEach 总是返回undefined。正确的方法是使用.map，如下：

const neighbors = await Promise.all(
    fetchedData.borders.map(async (alphaCode) => {
        const response = await fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`);
        const fetchedNeighbor = await response.json();
        return fetchedNeighbor.name; // return it!!
    });
)
setBorderCountries(neighbors);

请注意，这里.map 迭代也是同步完成的，但它返回一个promise 数组，这正是Promise.all 所需要的。等待发生在Promise.all 之前的await。

Answer 2

Promise.all 接受一系列承诺。您的代码正在将forEach 调用（未定义）的结果传递给Promise.all，这不会按照您的意愿进行。

如果您改用map，您可以创建一个请求承诺数组。大致如下：

const fetchNeighbor = async (alphaCode) => {
  return fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`)
    .then(response => response.json())
    .then(n => n.name);
}

const neighborNames = await Promise.all(fetchedData.borders.map(fetchNeighbor));
setBorderCountries(neighbors);

---

Array.map 通过对源数组中的每个元素运行给定的函数来生成一个新数组。所以这两个大致等价：

const promises = fetchedData.borders.map(fetchNeighbor);

const promises = [];
fetchedData.borders.forEach(alphaCode => {
  promises.push(fetchNeighbor(alphaCode));
});

你现在有一个可以传递给 Promise.all 的 Promise 数组（因为这是 fetchNeighbor 返回的）：

const results = await Promise.all(promises);

Promise.all 使用已解析的承诺值数组进行解析。由于 fetchNeighbor 最终会使用名称解析，因此您现在有了一个名称数组。

const results = await Promise.all(promises);

console.log(results);
// ['Country A', 'Country B', 'Country C', ... ]

Answer 3

我认为你应该使用这样的东西。

const start = async () => {
  await asyncForEach([1, 2, 3], async (num) => {
    await waitFor(50);
    console.log(num);
  });
  console.log('Done');
}
start();

这篇文章我认为是一个很好的学习资源：async/await with for each