Promise.
Enregistre une fonction appelée quand la promesse est résolue, et renvoie une nouvelle promesse, ce qui permet d’enchaîner les étapes.
- Renvoie
- Une nouvelle promesse, résolue avec la valeur renvoyée par la fonction, ou rejetée si la fonction lève une erreur.
Exemple
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
wait(200, 120)
.then((points) => points + 30)
.then((points) => {
console.log(`Vous avez ${points} points`)
return wait(200, points >= 150)
})
.then((levelUp) => console.log('Nouveau niveau :', levelUp))Définition et utilisation
#La méthode then() prend une fonction qui sera appelée avec la valeur de la promesse une fois celle-ci résolue. Le deuxième argument, optionnel, est une fonction de gestion d’erreur, mais on utilise en général à la place un catch() séparé à la fin de la chaîne.
then() renvoie toujours une nouvelle promesse. Sa valeur devient ce que renvoie votre fonction. Une valeur normale passe directement au then() suivant, tandis qu’une promesse renvoyée fait attendre la chaîne jusqu’à son résultat. Cela permet d’enchaîner les étapes suivantes (récupérer, traiter, afficher) les unes après les autres au lieu de les imbriquer.
L’erreur la plus fréquente est l’absence de return au milieu de la chaîne. L’étape suivante reçoit alors undefined et n’attend pas la fin de l’opération asynchrone lancée à l’étape précédente.
Syntaxe
#promise.then(onFulfilled)
promise.then(onFulfilled, onRejected)Paramètres
#onFulfilled
function (value)
Fonction appelée avec la valeur de la promesse résolue. Ce qu’elle renvoie devient la valeur de la nouvelle promesse.onRejected
optionnelle, function (reason)
Fonction appelée quand la promesse est rejetée. Il est en général plus pratique d’utilisercatch().
Plus d’exemples
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
wait(100, 'Leçon 1')
.then((lesson) => {
wait(100, lesson + ' terminée')
})
.then((result) => console.log(result))La fonction entre accolades sans return renvoie undefined, donc le then() suivant n’attend pas la promesse interne. Il suffit d’ajouter return, ou de retirer les accolades.
Promise.resolve('depuis la promesse').then((value) => console.log(value))
console.log('de façon synchrone')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
#- À chaque étape de la chaîne, renvoyez une valeur ou une promesse. Une fonction fléchée sans accolades le fait automatiquement.
- Un seul
catch()à la fin de la chaîne attrape l’erreur de n’importe quelle étape précédente. - Avec de nombreuses étapes, envisagez
asyncetawait. Ce genre de code se lit comme du code ordinaire, exécuté de haut en bas.
Entrées associées
#- async/await vs then()async/await permet d’écrire du code asynchrone comme du code séquentiel, avec les erreurs dans try...catch, tandis que then() crée une chaîne d’appels sur la promesse.
- PromiseUn objet qui représente le résultat d’une opération disponible plus tard : une valeur en cas de succès, ou une erreur.
- Promise.prototype.catch()Enregistre une fonction de gestion d’erreur, appelée quand la promesse est rejetée.
- Promise.prototype.finally()Enregistre une fonction appelée une fois la promesse réglée, qu’elle se termine par un succès ou par une erreur.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- fetch()Envoie une requête HTTP et renvoie une promesse avec la réponse du serveur (un objet Response).
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.