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.
Comparaison point par point
#Comment vous écrivez les étapes suivantes
- async function
- Comme du code ordinaire, ligne par ligne avec
await - Promise.prototype.then()
- Comme une chaîne d’appels
.then()
Gestion des erreurs
- async function
- Bloc
try...catch - Promise.prototype.then()
- Méthode
.catch()à la fin de la chaîne
Ce que renvoie l’appel de la fonction
- async function
- Toujours une
Promise, même pour unreturnordinaire - Promise.prototype.then()
- Toujours une nouvelle
Promise, différente à chaque.then()
L’erreur la plus fréquente
- async function
awaitoublié avant l’appel- Promise.prototype.then()
returnoublié au milieu de la chaîne
Opérations parallèles
- async function
await Promise.all([...])- Promise.prototype.then()
Promise.all([...]).then(...)
Usage typique
- async function
- Plusieurs étapes, conditions, boucles avec attente
- Promise.prototype.then()
- Une seule étape ou une courte chaîne sans
async
Exemple
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
async function loadWithAwait() {
const points = await wait(100, 120)
return points + 10
}
function loadWithThen() {
return wait(100, 120).then((points) => points + 10)
}
console.log(await loadWithAwait())
console.log(await loadWithThen())Définition et utilisation
#Ce sont deux façons de travailler avec le même mécanisme de promesses, pas deux technologies différentes. Une fonction async renvoie toujours une Promise, tout comme le fait toujours then(). À l’intérieur d’une fonction async, l’opérateur await suspend l’exécution jusqu’à la résolution de la promesse, et then() enregistre une fonction qui sera appelée avec son résultat.
La différence est dans l’écriture et la gestion des erreurs. Avec await, le code ressemble à des instructions séquentielles ordinaires, et vous attrapez les erreurs avec le bloc try...catch habituel. then() nécessite une chaîne d’appels dans laquelle chaque étape doit renvoyer une valeur ou une promesse, et les erreurs sont gérées par catch() à la fin. Un return oublié au milieu d’une chaîne then() est une erreur fréquente : l’étape suivante reçoit undefined et n’attend pas le résultat de la précédente.
Pour plusieurs étapes, des conditions et des boucles avec attente, utilisez async/await, car ce code est plus facile à lire et à déboguer. Une promesse courte et unique, ou une fonction utilitaire qui doit rester une fonction ordinaire (non async), peut rester avec then() et catch().
Syntaxe
#async function name() {
const value = await promise
return value
}
promise.then((value) => value).catch((error) => {})Plus d’exemples
#const fail = (ms, message) =>
new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms))
async function withAwait() {
try {
await fail(100, 'Session expirée')
} catch (error) {
console.log('await:', error.message)
}
}
function withThen() {
return fail(100, 'Session expirée').catch((error) => console.log('then:', error.message))
}
await withAwait()
await withThen()const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
function chainWithBug() {
return wait(100, 'Leçon 1').then((lesson) => {
wait(100, lesson + ' terminée')
})
}
async function sequenceFixed() {
const lesson = await wait(100, 'Leçon 1')
return await wait(100, lesson + ' terminée')
}
console.log(await chainWithBug())
console.log(await sequenceFixed())Dans chainWithBug(), la fonction de then() n’a pas de return, donc la chaîne n’attend pas la promesse interne et reçoit undefined. Avec await, une telle erreur n’a aucune chance de se produire, car l’étape suivante attend toujours la précédente.
Bonnes pratiques
#- Dans du code neuf avec plusieurs étapes, utilisez
async/await. Il se lit comme du code ordinaire exécuté de haut en bas. - En écrivant
.then(), pensez aureturnà chaque étape de la chaîne. Sans lui, l’étape suivante n’attend pas la promesse interne. - À l’intérieur d’une fonction
async, gérez les erreurs avec un bloctry...catch. Pour une chaîne ordinaire, utilisez un seulcatch()à la fin.
Entrées associées
#- async functionDéclare une fonction asynchrone, qui renvoie toujours une promesse et peut utiliser le mot-clé await à l’intérieur.
- 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.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- Promise.prototype.catch()Enregistre une fonction de gestion d’erreur, appelée quand la promesse est rejetée.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.