async function
Déclare une fonction asynchrone, qui renvoie toujours une promesse et peut utiliser le mot-clé await à l’intérieur.
- Renvoie
- Une promesse (
Promise) qui se résout avec la valeur dereturn, ou qui est rejetée avec l’erreur levée.
Exemple
#const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
async function loadProfile(name) {
await wait(300)
return { name, level: 7 }
}
const promise = loadProfile('Léa')
console.log(promise)
const profile = await promise
console.log(profile)Définition et utilisation
#Le mot-clé async placé avant une fonction la transforme en fonction asynchrone. Une telle fonction renvoie toujours une promesse : la valeur de return devient la valeur de la promesse résolue, et une exception levée entraîne son rejet.
À l’intérieur d’une fonction async, vous pouvez utiliser await pour attendre le résultat d’une autre promesse. Le code ressemble alors à du code ordinaire, exécuté de haut en bas, et vous attrapez les erreurs avec le bloc try...catch habituel plutôt qu’avec la méthode catch().
async fonctionne avec toutes les formes de fonctions : déclaration, expression, fonction fléchée (async () => {}) et méthode d’un objet ou d’une classe. Appeler une fonction async ne bloque pas le programme. Le code écrit après l’appel s’exécute immédiatement, avant que la fonction ait terminé son travail.
Syntaxe
#async function name(param1, param2) {
…
}
const name = async (param) => {
…
}Plus d’exemples
#async function buyCourse(price, balance) {
if (balance < price) throw new Error('Pas assez de pièces')
return balance - price
}
buyCourse(50, 80).then((rest) => console.log('Reste :', rest))
buyCourse(90, 80).catch((error) => console.log('Erreur :', error.message))const getPoints = async () => 120
const shop = {
async buy(item) {
const points = await getPoints()
return `${item}: il reste ${points - 100} points`
}
}
console.log(await shop.buy('Nouvel avatar'))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
#- Le simple appel d’une fonction
asyncdonne un objetPromise. Pour obtenir le résultat, utilisezawaitouthen(). - Ne marquez pas une fonction comme
asyncsi elle ne fait rien d’asynchrone. Vous transformeriez inutilement son résultat en promesse. - Gérez les erreurs d’une fonction
asyncavectry...catchà l’intérieur, ou aveccatch()au moment de l’appel.
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.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- 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.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
- 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.