await
Met en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- Renvoie
- La valeur de la promesse résolue. En cas de rejet, elle lève une erreur.
Exemple
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
console.log('Récupération du résultat du test...')
const score = await wait(300, 87)
console.log(`Résultat : ${score} %`)Définition et utilisation
#Vous placez l’opérateur await devant une promesse. La fonction async se met en pause à cet endroit, et quand la promesse est résolue, await renvoie sa valeur et le code continue. Si la promesse est rejetée, await lève une erreur que vous attrapez avec un bloc try...catch.
Seule la fonction en cours se met en pause, pas toute la page. Pendant ce temps, le navigateur continue de gérer les clics, les animations et le reste du code. await fonctionne à l’intérieur des fonctions async, ainsi qu’au premier niveau des modules JavaScript, comme dans les exemples de cette page.
Des await successifs s’exécutent l’un après l’autre. Si les opérations ne dépendent pas les unes des autres, lancez-les ensemble et attendez-les toutes avec await Promise.all([...]). L’ensemble prendra alors aussi longtemps que l’opération la plus longue, et non la somme de leurs durées.
Syntaxe
#const result = await promiseParamètres
#promise
promesse ou valeur quelconque
La promesse que vous attendez. Une valeur normale est renvoyée sans changement.
Plus d’exemples
#const fail = (ms, message) =>
new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms))
try {
await fail(200, 'Session expirée')
console.log('Vous ne verrez pas ceci')
} catch (error) {
console.log('Erreur :', error.message)
}const task = (name, ms) =>
new Promise((resolve) => {
console.log(`début : ${name}`)
setTimeout(() => {
console.log(`fin : ${name}`)
resolve(name)
}, ms)
})
console.log('L’un après l’autre')
await task('profil', 200)
await task('cours', 100)
console.log('En parallèle')
await Promise.all([task('profil', 200), task('cours', 100)])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
#- N’oubliez pas
awaitavant l’appel d’une fonctionasync. Sans lui, vous obtenez une promesse au lieu d’un résultat, et son erreur n’atteindra pas votretry...catch. - Lancez les opérations indépendantes ensemble et attendez-les avec
await Promise.all([...])plutôt que d’écrire plusieursawaità la suite. awaitne fonctionne pas dans une fonction normale, ni dans une fonction passée àforEach(). Pour une boucle avec attente, utilisezfor...ofdans une fonctionasync.
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.
- 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.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.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
- for...ofParcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.