获取数组中的每个项目

Question

所以我很确定这与 Promise.all 或类似的东西有关，但我不确定如何去做。如果有人可以帮助我解决此代码，我将不胜感激。

注意：如果重要的话，我尝试映射的数组是一个对象数组

const productsArray = this.cartProducts.map(product => 
      fetch(`/api/products/getDetails/${product.clientId}`))
      .then(res => res.json())
      .then(data => {
        console.log(data)
      })

我什至无法启动此代码，但我不确定我应该做什么...

这是我在 visual studio 代码中的错误。

property 'then' does not exist on type 'promise<response>[]'

Answer 1

fetch() result is promise so you need to use Promise.all()

const promises = await Promise.all(this.cartProducts.map(product => fetch(`/api/products/getDetails/${product.clientId}`))
const productsArray = await Promise.all(promises.map(p => p.json()))

Answer 2

William Wang 的回答非常好，但您可能想要使用async/await 来点赞：

const productsArray = this.cartProducts.map(async product => {
      const res = await fetch(`/api/products/getDetails/${product.clientId}`);
      const data = res.json();
      return data;
});

可以简化为：

const productsArray = this.cartProducts.map(async product => {
      return await fetch(`/api/products/getDetails/${product.clientId}`).json();
});

但是请注意，这种模式比使用 Promise.all 模式更“同步”，因为每个产品只会在前一个产品被提取后才被提取。 Promise.all 将并行获取所有产品。

Answer 3

TL;DR: 将数组中的每个项目映射到一个获取调用并将它们环绕在 Promise.all().

周围

Promise.all(
  this.cartProducts.map(p =>
    fetch(`/api/products/getDetails/${p.clientId}`).then(res => res.json())
  )
).then(products => console.log(products));

说明

fetch() returns a Promise a.k.a“我保证以后给你一个值”。当时机成熟时，该未来值将 resolved 并传递给 .then(callback) 中的回调以进行进一步处理。 .then() 的结果也是 Promise，这意味着它们是可链接的。

// returns Promise
fetch('...')
// also returns Promise
fetch('...').then(res => res.json())
// also returns Promise where the next resolved value is undefined
fetch('...').then(res => res.json()).then(() => undefined)

因此下面的代码将 return 另一个 Promise，其中解析值是已解析的 Javascript 对象。

  fetch('...').then(res => res.json())

Array.map() 将每个项目映射到回调的结果，并且 return 执行所有回调后的新数组，在本例中为 Promise.[=35= 的数组]

const promises = this.cartProducts.map(p =>
  fetch("...").then(res => res.json())
);

调用地图后，您将有一个 Promise 列表等待解析。它们不包含如上所述从服务器获取的实际产品值。但是你不想要承诺，你想要获得最终解析值的数组。

这就是 Promise.all() 发挥作用的地方。它们是 Array.map() 的承诺版本，其中它们 'map' 每个 Promise 使用 Promise API.

解析值

因为 Promise.all() 将在 promises 数组中的所有个人承诺被解决后解决另一个新的 Promise .

// assuming the resolved value is Product

// promises is Promise[]
const promises = this.cartProducts.map(p =>
  fetch("...").then(res => res.json())
);

Promise.all(promises).then(products => {
  // products is Product[]. The actual value we need
  console.log(products)
})

获取数组中的每个项目

fetching each item inside an array

javascript

angular

promise

fetch

promise.all

说明