“Promise.allSettled” pour résoudre toute mes promesses

“Promise.allSettled” pour résoudre toute mes promesses

Ce post fait partie de la catégorie #TIL. J'y décris mes découvertes quotidiennes sur le développement web.

Vous connaissez sûrement Promise.all, qui prend en entrée un tableau de promesses, et renvoie une promesse qui se résout lorsque l’ensemble des promesses passées en argument le sont.

const promise1 = new Promise((resolve) => {
  setTimeout(resolve, 400, '✅ it resolves');
});
const promise2 = new Promise((resolve) => {
  setTimeout(resolve, 100, '✅ it resolves too');
});

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
});

// output:
// ["✅ it resolves", "✅ it resolves too"]

Par contre, elle sera rejetée dès que l’une de ses promesses échoue.

const promise1 = new Promise((resolve) => {
  setTimeout(resolve, 400, '✅ it resolves');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, '❌ it fails');
});

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
}).catch(e => console.log(e));

// output:
// "❌ it fails"

J’ai découvert aujourd’hui Promise.allSettled. Elle fonctionne comme Promise.all , mais retourne le résultat de toutes les promesses passées en argument, réussies ou rejetées.

const promise1 = new Promise((resolve) => {
  setTimeout(resolve, 400, '✅ it resolves');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, '❌ it fails');
});

Promise.allSettled([promise1, promise2]).then((values) => {
  console.log(values);
})

// output: [
//  0: {status: "fulfilled", value: "✅ it resolves"}
//  1: {status: "rejected", reason: "❌ it fails"}
// ]

Cette méthode retourne un tableau d’objet, qui contiendront chacun une propriété status (fulfilled ou rejected).

Si le status est fulfilled, la valeur de retour est accessible dans la propriété value.

Si le status est rejected, la valeur de retour est accessible dans la propriété reason.

Cela peut être très utile si vous voulez par exemple exécuter plusieurs appels fetch en parallèle, et ne pas tenir compte des appels qui échouent.

Cette méthode est intégrée au standard ES2020, mais déjà supportée par tous les navigateurs modernes.

Vous trouverez toutes les informations nécessaires sur Promise.allSettled dans la documentation officielle.

Une question, une remarque ?

N'hésite pas à m'envoyer un message, je te répondrai avec plaisir !