循环获取和返回响应的问题

Question

这是我的第一个 Whosebug 问题，所以请对我温柔点

我正在制作带有 React 查询和获取功能的图鉴应用程序，但我在返回我的宠物小精灵数组时遇到问题。

我正在尝试获取一个 pokeApi，其中 returns 由对象和另一个 url 组成的结果数组。然后我尝试映射槽结果数组并为单个口袋妖怪获取 url 然后将其推送到 arr 变量。最后，我返回了不可读的 arr。

如何正确推送数据到map中的arr？

我做错了什么？有解决办法吗？


const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });
    const arr = [];
    data.results.map((item) => {
      return fetch(item.url)
        .then((res) => res.json())
        .then((data) => {
          arr.push(data);
        });
    });
    return arr;
  };

  const { isLoading, data } = useQuery("pokemons", fetchData, {
    refetchOnWindowFocus: false
  });

  if (isLoading) return <div>loading...</div>;
  console.log(data); // cant read
  return <div>Data loaded</div>;

https://codesandbox.io/s/strange-pond-wz4ws?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您的 fetchData 函数的问题在于它不会等待每个 item.

的任何后续提取

要解决这个问题，您必须将每个结果映射为 Promise，然后使用 Promise.all

等待所有这些承诺完成

您的 fetchData 函数可能如下所示：

  const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });

    // Wait for all subsequent fetches to finish
    const arr = await Promise.all(
      data.results.map((item) => fetch(item.url).then((res) => res.json()))
    );

    return arr;
  };

Answer 2

@JAM 提出的解决方案，但没有 .then()。省略了错误处理（您可以使用 catch() 或 try/except 块）：

const fetchData = async key => {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon`);
    const data = res.json();

    // Wait for all subsequent fetches to finish
    return Promise.all(
        data.results.map(async item => {
            const res = await fetch(item.url);
            return res.json();
        }
    );
};

循环获取和返回响应的问题

Problem with loop fetching and returing response

arrays

fetch

promise

reactjs

react-query