如何获取多个 API 获取数据避免第一个 console.log 空数组答案

【问题标题】：How to get multiple API fetch data avoid first consle.log empty array如何获取多个 API 获取数据避免第一个 console.log 空数组
【发布时间】：2022-10-25 15:36:37
【问题描述】：

当我尝试使用 map() 方法获取多个 API 并启动项目时，它给了我空的信息，我知道我的 console.log 当时无法获取，只是使用Ctrl+s按再次保存文件，它开始给我反应原生 vs 代码的价值。在这种情况下，我怎样才能避免再次启动项目Ctrl+s按。我应该用什么来避免它们，一旦我启动，我将能够获取数据。

我已经尝试过 setinterval 但它重复我空数组， setinterval 无法再次获取。

我应该尝试它的任何功能吗？

这是我在 vs 代码中的代码：

const [dataLoc, setDataLoc] = useState([]);
const ids = [1,2,3,4,5];

useEffect(() => {
  ids?.map((id) => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => response.json())
      .then((dataLoc) => setDataLoc((prev) => [...prev, dataLoc.title]))
      .catch((error) => console.error(error));
  });
}, []);

console.log(dataLoc);

当我尝试在 vs 代码中运行时，我遇到了这个问题，正如我已经提到的那样。

任何人都可以帮助我吗？我在这个地方堆了很长时间。我很感激你的尝试。感谢您提前尝试！

【问题讨论】：

如果您粘贴代码会很好，这样更容易理解您要做什么
我已经在这里添加了我的代码
我不知道你在说什么
它给了我第一个 console.log() 的空数组，当我启动项目时我无法查看我的数据。
好的，首先你需要修改你的获取方法......如果你像这样使用map 获取数据，则不会等待承诺。如果您希望按顺序进行调用，您应该使用Promise.all、Promise.allSettled 甚至for...of 循环。

标签： javascript react-native fetch-api map-function

【解决方案1】：

您可以尝试上面 cmets 中提到的Promise.all() 方法。

useEffect(() => {
 fetchData();
}, []);

async function fetchData(){
  const requestArray = await Promise.all(ids?.map((id) => {
    return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => response.json())
      .then((dataLoc) => {
        return dataLoc.title;
      })
      .catch((error) => console.error(error));
  }));

  console.log(JSON.stringify(requestArray));
  setDataLoc(requestArray);
}

【讨论】：

顺便说一句，我有这个警告可能未处理的承诺拒绝（id：0）：，，，，我怎样才能避免它，知道吗？
你能把完整的警告放在这里吗？
我已经使用 try and catch 解决了问题，感谢您的帮助！！！！

【解决方案2】：

避免警告：可能未处理的 Promise Rejection (id:0)

   useEffect(() => {
     fetchData();
    }, []);
    
    async function fetchData(){
    
    try{
const requestArray = await Promise.all(ids?.map((id) => {
        return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
          .then((response) => response.json())
          .then((dataLoc) => {
            return dataLoc.title;
          })
          .catch((error) => console.error(error));
      }));
    
      console.log(JSON.stringify(requestArray));
      setDataLoc(requestArray);
    }
    catch (error) {
                console.log(error);
            }
     }

【讨论】：