If just one promise in my array is resolved, I still anticipate rejection when using Promise.all

Question

If just one promise in my array is resolved, I still anticipate rejection when using Promise.all

I am dealing with an array of promises that include simple API URLs to fetch Github users. I have tried deliberately putting a wrong URL in one of the values in the array, but it always resolves instead of rejecting. Any idea why this might be happening?

For reference, here is a link to my test case: https://jsbin.com/lapibalate/edit?js,console

let urlMap = [
  {
    url: 'https://api.github.com/users/andreepratama27',
  },
  {
    url: 'https://apiiiiiii.github.com/users/rizalfakhri12'
  }
]

let promises = urlMap.map(v => fetch(v))

Promise.all(promises)
  .then(res => console.log('RESOLVED'))
  .catch(err => console.log("REJECTED"))

javascript ecmascript-6 es6-promise

Answer 1

Answer №1

The reason for this issue is that you are fetching data not from the specified URLs, but from [object Object] on your current URL (since the v property contains an object, not a string). To fix this, update the map to use the url property instead:

let promises = urlMap.map(v => fetch(v.url))

Here's the updated example:

let urlMap = [
      {
        url: 'https://api.github.com/users/andreepratama27',
      },
      {
        url: 'https://apiiiiiii.github.com/users/rizalfakhri12'
      }
    ]

    let promises = urlMap.map(v => fetch(v.url))

    Promise.all(promises)
      .then(res => console.log('RESOLVED'))
      .catch(err => console.log("REJECTED"))

Answer 2

The reason for this issue is that you are fetching data not from the specified URLs, but from [object Object] on your current URL (since the v property contains an object, not a string). To fix this, update the map to use the url property instead:

let promises = urlMap.map(v => fetch(v.url))

Here's the updated example:

let urlMap = [
      {
        url: 'https://api.github.com/users/andreepratama27',
      },
      {
        url: 'https://apiiiiiii.github.com/users/rizalfakhri12'
      }
    ]

    let promises = urlMap.map(v => fetch(v.url))

    Promise.all(promises)
      .then(res => console.log('RESOLVED'))
      .catch(err => console.log("REJECTED"))

Answer 3

Answer №2

According to the information provided in the resources:

The fetch concept differs from the jQuery.ajax() method in two primary ways:

The Promise returned by fetch() will not reject for HTTP error statuses such as 404 or 500. Instead, it will resolve normally (with ok status set to false), and will only reject in case of network failure or any hindrance that prevented the completion of the request.

Hence, this serves as the explanation.

Answer 4

According to the information provided in the resources:

The fetch concept differs from the jQuery.ajax() method in two primary ways:

The Promise returned by fetch() will not reject for HTTP error statuses such as 404 or 500. Instead, it will resolve normally (with ok status set to false), and will only reject in case of network failure or any hindrance that prevented the completion of the request.

Hence, this serves as the explanation.

If just one promise in my array is resolved, I still anticipate rejection when using Promise.all

Answer №1

Answer №2

Similar questions

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Problem encountered when iFrame Element does not resize properly within its container

Use jquery or javascript to align a button to the center

Incorporate a dynamic fading effect for text and images using JQuery

Tips for extracting data from various select drop-down menus within a single webpage

Tips on concealing a bootstrap card upon being placed in a designated landing area

Display or conceal a text field in Vue 2/Vuetify 1.5 depending on whether a checkbox is selected, with the possibility of duplicated

Swapping out the document.createElement() method for React.createElement()

Issue with the transmission of FormData and string data to PHP

What is the process for altering a route in React 18?

Exploring the process of searching for an id within an array of objects received through axios in Vue 2

The Bootstrap modals seem to be invisible within the Rails application

How can I initiate an AJAX POST request over HTTPS?

What is the best method to dynamically navigate through JSON data and save an object at a specific level?

Blending MapLibre GL JS with ThreeLoader3dTiles

HTML is loaded repeatedly using the ajax load() function, without involving JSON

Checking if arrays are empty using ES6 conditional if statements

Navigating AngularJS with multiple external files and folders

Utilize React HOC (Higher Order Component) and Redux to retrieve data and pass it as props

Implementing a Search Box feature in React-leaflet version 3.1.0