获取 .json 不是 Promise.all w/fetch 上的功能

Question

哦，我又一次遇到了那些 Promise.all 忧郁：（我有一个函数可以从提供的 url 中创建一个 fetch 调用数组，然后我们想通过 Promise.all 检索数据并返回响应数组或更好将承诺返回给调用函数。问题是这会导致控制台显示错误：

There was problem retrieving data. TypeError: r.json is not a function

函数的代码是：

 const getLeagueLeaders = (url, params) => {
  // First let's create the array of url's
  let queryURLs = [];

  params.forEach((param) => {
    queryURLs.push(
      fetch(`${url}${new URLSearchParams(param)}`, {
        method: "get",
        headers: {
          Authorization:
            "Basic ==",
        },
      }).then((res) => res.json())
    );
  });

  return (
    Promise.all(queryURLs)
      // map array of responses into an array of response.json() to read their content
      .then((responses) => responses.map((r) => r.json()))
      .catch((err) => {
        console.error("There was problem retrieving data.", err);
      })
  );
};
    
    module.exports = getLeagueLeaders;

在 Vue 组件中

 mounted: async function () {
        const leagueLeadersResponseArray = await getLeagueLeaders(
          this.fetchBaseUrl,
          this.params
        );
this.qbLeaders =
      leagueLeadersResponseArray[0].cumulativeplayerstats.playerstatsentry;

很明显，leagueLeadersResponseArray 是未定义的。我研究了 .json() 并没有看到我是如何错误地使用它的。起初我以为我需要一个 Promise.all 包装器，用于responses.map((r) => r.json()) 但这也没有好处。我看了这个link，但我没有像他那样使用 fetch。非常感谢任何指导......

为其他人更新了工作代码：

// ---------- src/js/modules/ ------------------ //

/* jshint ignore:start */
// Make function to retrieve League Leaders in a Category

const getLeagueLeaders = (url, params) => {
  // First let's create the array of url's
  let queryURLs = [];

  params.forEach((param) => {
    queryURLs.push(
      fetch(`${url}${new URLSearchParams(param)}`, {
        method: "get",
        headers: {
          Authorization:
            "Basic ==",
        },
      }).then((res) => res.json())
    );
  });

  return Promise.all(queryURLs).catch((err) => {
    console.error("There was problem retrieving data.", err);
  });
};

module.exports = getLeagueLeaders;

Answer 1

您的模板字符串在整个 fetch 周围，而它应该只在要获取的参数中：

  params.forEach((param) => {
    queryURLs.push(fetch(`${url}${new URLSearchParams(param)}`, {
      method: "get",
      headers: {
        Authorization:
          "Basic *****==",
      }
    }));
  });

然后，你有一个.then(data => {return data})，它不会做任何事情，因为return 从then 回调返回，不是函数。你应该返回 Promise.all 给你的承诺：

  return Promise.all(queryURLs)
    // map array of responses into an array of response.json() to read their content
    .then((responses) => responses.map((r) => r.json())) // Get error There was problem retrieving data. TypeError: r.json is not a function
    .catch((err) => {
      console.error("There was problem retrieving data.", err);
    });