时间戳

首页 > 解决方案 > 函数在检查元素中返回空白数组，其中包含不可访问的数据

javascript - 函数在检查元素中返回空白数组，其中包含不可访问的数据

问题描述

场景 因此，我尝试使用不同的 URL 执行多个 API 请求，将所有响应添加到数组中，然后返回数组并使用它。我的代码：

const getData = (dataURLs) => {
  let returnData = [];
  for (let i = 0; i < dataURLs.length; i++) {
    getFetch(dataURLs[i]).then((response) => {
      returnData.push(response);
      return response;
    });
  }
  console.log(returnData[0]);
  return returnData;
};

所以这是发出请求的函数，getFetch函数是这样的：

const getFetch = async (url) => {
  return fetch(url)
    .then((response) => {
      if (!response.ok) {
        // get error message from body or default to response status
        const error = (response && response.message) || response.status;
        return error;
      }
      return response.json();
    })
    .catch((error) => {
      return error;
    });
};

这只是发出请求并返回我想要的 JSON，并且这个函数在我在其他地方使用它时工作。

问题

我的问题是，当我使用该getData函数发出请求时，它将返回一个空白数组' []'，但是当我在检查元素中单击此数组时，它会显示此内容。

[] ->
    0: {nodes: Array(5), edges: Array(5), self: Array(1)}
    length: 1

如果我尝试在 js 中访问此数组中的任何内容，它就是不允许我这样做。但是如果我在 Inspect Element 中查看它，它将是一个空白数组，我可以展开它并在其中显示请求的数据

只是想知道是否有人知道解决此问题的方法？

谢谢 ：）

标签： javascript

解决方案

您在这里遇到的问题是该函数在承诺解决之前返回数组（并将您想要的数据放入数组中）。您需要先等待承诺。有几种方法可以做到这一点，但一种方法是将 Promise 放入数组并使用Promise.all()来获取所有可用的值。

const getData = (dataURLs) => {
  let returnPromises = [];
  for (let i = 0; i < dataURLs.length; i++) {
    returnPromises.push(getFetch(dataURLs[i]));
  }

  return Promise.all(returnPromises);
};

从这里开始，您将继续使用此函数的结果作为承诺。

getData([...]).then(([result1, result2, ...resultN]) => {...})

推荐阅读