Promise
Un objet qui représente le résultat d’une opération disponible plus tard : une valeur en cas de succès, ou une erreur.
- Renvoie
- Un nouvel objet
Promiseà l’état d’attente.
Exemple
#const promise = new Promise((resolve) => {
console.log('1. L’exécuteur démarre immédiatement')
setTimeout(() => resolve('3. Résultat après 300 ms'), 300)
})
promise.then((value) => console.log(value))
console.log('2. Code après la création de la promesse')Définition et utilisation
#Une promesse (Promise) est un objet qui représente le résultat d’une opération pas encore terminée, par exemple la récupération de données depuis un serveur. Elle commence dans l’état d’attente (pending), puis passe définitivement dans l’un de deux états : résolue (fulfilled) avec une valeur, ou rejetée (rejected) avec une raison d’échec.
Le constructeur new Promise(executor) prend une fonction qui reçoit deux autres fonctions : resolve pour signaler un succès, et reject pour signaler une erreur. La fonction executor s’exécute immédiatement, de façon synchrone, au moment de la création de la promesse. Vous réagissez au résultat avec les méthodes then(), catch() et finally(), ou avec le mot-clé await.
Une promesse ne se résout qu’une seule fois. Les appels suivants à resolve ou reject sont ignorés. Les fonctions passées à then() s’exécutent toujours de façon asynchrone, même quand la promesse est déjà résolue, donc le code écrit juste après s’exécute avant elles.
En pratique, vous créez rarement des promesses à la main. Les API prêtes à l’emploi, comme fetch(), en renvoient, tout comme chaque fonction async. Le constructeur est surtout utile pour envelopper un ancien code basé sur des fonctions de rappel, par exemple setTimeout().
Syntaxe
#new Promise((resolve, reject) => { … })Paramètres
#executor
function (resolve, reject)
Fonction exécutée immédiatement à la création de la promesse. Appelez-yresolve(valeur)en cas de succès, oureject(erreur)en cas d’échec.
Plus d’exemples
#const checkAnswer = (answer) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (answer === 42) resolve('Bonne réponse !')
else reject(new Error('Réessayez'))
}, 200)
})
console.log('Vérification...')
checkAnswer(42).then((message) => console.log(message))
checkAnswer(7).catch((error) => console.log(error.message))const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
console.log('Chargement du niveau...')
await wait(500)
console.log('Niveau chargé')const promise = new Promise((resolve, reject) => {
resolve('premier résultat')
resolve('deuxième résultat')
reject(new Error('trop tard'))
})
promise.then((value) => console.log(value))Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Gérez toujours l’erreur d’une promesse avec
catch()ou avectry...catchetawait. Un rejet non géré apparaît dans la console comme une erreur « Uncaught (in promise) ». - Passez à
reject()un objetError, pas simplement une chaîne de caractères. Vous obtiendrez ainsi un message dansmessage, un nom d’erreur et une pile d’appels. - Plutôt que de longues chaînes de
then(),asyncetawaitsont généralement plus lisibles dans du code neuf.
Entrées associées
#- Promise.prototype.then()Enregistre une fonction appelée quand la promesse est résolue, et renvoie une nouvelle promesse, ce qui permet d’enchaîner les étapes.
- Promise.prototype.catch()Enregistre une fonction de gestion d’erreur, appelée quand la promesse est rejetée.
- async functionDéclare une fonction asynchrone, qui renvoie toujours une promesse et peut utiliser le mot-clé await à l’intérieur.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- Promise.all()Attend que toutes les promesses soient résolues et renvoie un tableau de leurs résultats. Se rejette dès la première erreur.
- setTimeout()Exécute une fonction une seule fois, après le nombre de millisecondes indiqué.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.