javascript - 使用带有 JavaScript/ES6 的 for 循环创建一个获取 promise 的数组，可以通过 Promise.all 读取？

Question

因此，为了不让任何人厌烦背景故事，我需要从许多 API 访问数据才能运行我的脚本。在我执行脚本之前需要加载所有数据，我通常很乐意这样做:我只是声明一些获取请求，编写一个 Promise.all，然后继续执行该函数。

但是，我使用某个 API 遇到了麻烦，该 API 将我可以从一个请求中提取的结果数量限制为 100 个，我需要查询所有结果。我认为这没什么大不了的，因为我认为我可以通过在请求末尾附加“&page=X”来提出几个额外的请求。

然后，计划是从 API 请求页面总数，然后将其提供给 for 循环以将大量获取请求推送到 promise 数组(即 link://to/api/data&page=1，link://to/api/data&page=2，等等)。但是，当我实际尝试使用 for 循环创建此数组时，该数组返回空。这是我的工作:

const dataUrlNoPage = 'link/to/api/data&page=';
const totalPages = 3; //usually pulled via a function, but just using a static # for now

let apiRequestLoop = function(inp) {
  return new Promise(function(resolve){
    let promiseArray = [];
    for (let i = 1; i <= inp; i++) {
      let dataUrlLoop = dataUrlNoPage + i;
      fetch(dataUrlLoop).then(function(response){
        promiseArray.push(response.json());
      })
     }
    resolve(promiseArray);
  })
}

let finalPromiseArray = apiRequestLoop(totalPages).then(result => {
  let requestArray = [apiRequest1,apiRequest2];
  //requestArray contains earlier fetch promises
  result.forEach(foo => {
    requestArray.push(foo);
    }
  );
  return requestArray;
});

所以，真正让我感到困惑的是循环，以及它如何不返回一系列 promise 。当我在控制台中查看它时，它显示为一个空白数组，但我可以展开它并看到我期望的 promise 。我看到“下面的值刚刚被评估”响应。然而，无论我写了多少 promises 或 .thens，该数组在运行时都不会实际填充。

这是怎么回事？我不能通过 for 循环生成获取 promise 吗？

(另外，为了稍微打断这一行问题，是的，我尝试访问的 API 是 Wordpress。环顾四周，大多数人建议创建一个自定义端点，但让我们假设是为了这个项目的目的我被禁止这样做。)

Answer 1

这里有几个问题。

首先是您拥有提供给 new Promise 的函数，它本身包含 promise 的创建。不要这样做!这绝对是一种反模式，不会让您的代码保持整洁。

第二个是这段基本代码:

let promiseArray = [];
for (let i = 1; i <= inp; i++) {
  let dataUrlLoop = dataUrlNoPage + i;
  fetch(dataUrlLoop).then(function(response){
    promiseArray.push(response.json());
  })
 }
resolve(promiseArray);

这是说:

1. 创建一个空数组
2. 遍历另一个数组，执行 HTTP 请求
3. 用空数组解决你的 promise
4. 当 HTTP 请求完成后，将它们添加到数组中

第四步总是在第三步之后。

因此，您需要在进行过程中将promise 添加到您的数组中，并在它们全部完成时解决整个 promise。

let apiRequestLoop = function(inp) {
  let promiseArray = [];
  for (let i = 1; i <= inp; i++) {
    let dataUrlLoop = dataUrlNoPage + i;
    promiseArray.push(fetch(dataUrlLoop).then(function(response) {
      return response.json();
    }));
  }
  return Promise.all(promiseArray);
}

或者，使用箭头函数来清理:

let apiRequestLoop = function(inp) {
  let promiseArray = [];
  for (let i = 1; i <= inp; i++) {
    let dataUrlLoop = dataUrlNoPage + i;
    promiseArray.push(fetch(dataUrlLoop).then(response => response.json()));
  }
  return Promise.all(promiseArray);
}