Question

下面的代码从API获取一个数组，然后对该数组的每个元素检索更多数据。

fetch('https://reqres.in/api/users')
  .then(r => r.json()).then(r => {
    r.data.forEach(x => {
      fetch('https://reqres.in/api/users')
        .then(r => r.json()).then(r => {
          r.data.forEach(x => console.log(x.id))
        })
    })
  })

数据完全检索后，我需要对数据执行一些操作。怎么做？

问题是这是一组异步解决的Promises。 Promise.all()可用于收集所有的承诺并从那里开始工作-但其数额尚不清楚。换句话说，我可以使用

a = fetch('https://reqres.in/api/users')
b = fetch('https://reqres.in/api/users')
Promise.all([a, b]).then(x => console.log('all resolved here'))

但是脚本启动时传递给Promise.all()的内容未知。

Answer 1

...但是脚本启动时传递给Promise.all（）的内容未知。

没关系，您可以使用map代替forEach，然后等待结果：

fetch('https://reqres.in/api/users')
  .then(r => r.json()).then(r =>
    Promise.all(r.data.map(x =>
      fetch('https://reqres.in/api/users') // (presumably there's some parameter here, you're not just repeating the same call...)
        .then(r => r.json())
        .then(r => {
          r.data.forEach(x => console.log(x.id))
        })
    ))
  );

在map中创建的所有承诺都没有解决，或者它们中的任何一个都被拒绝之前，以上收益的链条不会解决。

Answer 2

您可以使用Array.map做出承诺：

const allPromises = r.data.map(x => {
  return fetch('https://reqres.in/api/users/' + x)
    .then(r => r.json())
});

Promise.all(allPromises).then(data => console.log('All data is loaded', data))

Answer 3

也许这将是解决方案，但是您的方法似乎有问题。

fetch('https://reqres.in/api/users')
  .then(r => r.json()).then(r => {
    return Promise.all(r.data.map(x => {
      return fetch('https://reqres.in/api/users')
        .then(r => r.json()).then(r => {
          r.data.forEach(x => console.log(x.id))
        })
      )
    })
  })

换句话说，您可以使用嵌套的Promise.all并由于执行then的内部代码而返回它。还有一个重要的注意事项，对于迭代式异步调用，您应该使用map而不是forEach。

嵌套提取完成后，如何执行操作？

3 个答案: