The Promise.any()
method accepts an array (or any other iterable) of promises as a parameter. It returns a Promise
object that is fulfilled with the value of the first input promise to fulfill:
- As soon as any input promise is fulfilled, the returned
Promise
object is fulfilled with that value. - If all input promises are rejected, the returned
Promise
object is rejected with anAggregateError
which has anerrors
property containing an array of all rejection reasons.
Promise.any()
can be used to race multiple promises against each other and find the first promise to be fulfilled.
Please note that at the moment, the Promise.any() method is only implemented in Firefox Nightly. Make sure to use a polyfill in your application to make it work across browsers.
const API_URL_1 = "https://starwars.egghead.training/"; const API_URL_2 = "https://swapi.mariusschulz.com/"; const output = document.getElementById("output"); const spinner = document.getElementById("spinner"); function query(rootURL, endpoint) { return fetch(rootURL + endpoint).then(response => { return response.ok ? response.json() : Promise.reject(Error("Unsuccessful response")); }); } function queryAPI(endpoint) { return Promise.any([ query(API_URL_1, endpoint), query(API_URL_2, endpoint) ]).catch(() => { return Promise.reject( Error(`Failed to fetch endpoint "${endpoint}"`) ); }); } function getFilmTitles(films) { return films .slice() .sort((a, b) => a.episode_id - b.episode_id) .map(film => `${film.episode_id}. ${film.title}`) .join(" "); } queryAPI("films") .then(films => { output.innerText = getFilmTitles(films); }) .catch(error => { console.warn(error); output.innerText = ":("; }) .finally(() => { spinner.remove(); });