发生 404 时处理 Promise 无法解析

Question

I'm new with Promise.

I have a vuejs component which fetch() function is like:

async fetch () {
this.loadingDetails = true
const products = await Promise.all(this.items.map((item) => {
  try {
      const products = this.$wizaplace.get('/catalog/products/' + item.declinationId.slice(0, 4), { // When the ID is incorrect, a 404 is returned
        lang: this.$i18n.locale
      })
      console.log(products)
  } catch (e) {
  // eslint-disable-next-line no-console
    console.log('Error Fetching profile: ', e)
  }

  return products
}))

console.log(products)

this.productsDetails = products.map((product) => {
  console.log(product)
  const generalAttributes = product.attributes.find(attr => attr.id === 49)

  const brewerie = generalAttributes.children.find(attr => attr.id === 59)
  const color = generalAttributes.children.find(attr => attr.id === 15)

  // console.log(product)

  return {
    attributes: product.attributes,
    brewerie: (brewerie && brewerie.value[0]) ? brewerie.value[0] : '',
    type: generalAttributes.children.find(attr => attr.id === 47).value[0],
    color: (color && color.value[0]) ? color.value[0] : ''
  }
})

this.loadingDetails = false

// console.log(this.productsDetails[0])

},

When one of the HTTP calls in the Promise.All(callback) fails, the Promise doesn't resolve. How could I handle this please?

Thanks for any help !

Answer 1

You are returning products outside the try block

You have to change that

const products = await Promise.all(this.items.map((item) => {
  try {
    const products = ...
    // ...
  } catch() {
    // ...
  }

  return products
}))

with that

const products = await Promise.all(this.items.map((item) => {
  try {
    const products = ...
    // ...
    return products
  } catch() {
    // ...
  }

  
}))