4.1 Mot-clé async
Les fonctions asynchrones en JavaScript te permettent d'écrire du code asynchrone qui ressemble et se lit comme du code synchrone.
Les mots-clés async et await, introduits dans ECMAScript 2017 (ES8), facilitent le travail avec les promesses
et rendent le code plus clair et gérable.
Concepts de base
Le mot-clé async devant la déclaration d'une fonction indique que la fonction est asynchrone. Une fonction asynchrone
retourne toujours une promesse, même si elle n'utilise pas explicitement l'opérateur return.
Si une fonction retourne une valeur, elle est automatiquement encapsulée dans une promesse contenant cette valeur.
Syntaxe :
async function nom() {
// code de la fonction
}
Exemple :
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Affichera : Hello, world!
});
4.2 Mot-clé await
Le mot-clé await est utilisé à l'intérieur d'une fonction asynchrone pour suspendre son exécution jusqu'à ce que la promesse
se réalise. await peut être utilisé uniquement à l'intérieur de fonctions déclarées avec le mot-clé async.
Syntaxe :
let result = await
promise;
Exemple :
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Affichera : Hello, world! après 2 secondes
}
displayGreeting();
4.3 Exemples d'utilisation de async et await
Exemple 1 : Fonction asynchrone avec plusieurs promesses
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Affichera : Data 1 après 1 seconde
const data2 = await fetchData2();
console.log(data2); // Affichera : Data 2 après 2 secondes
}
fetchAllData();
Exemple 2 : Exécution parallèle des opérations asynchrones
Pour exécuter plusieurs opérations asynchrones en parallèle, tu peux utiliser Promise.all() avec await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Affichera : Data 1 après 2 secondes
console.log(data2); // Affichera : Data 2 après 2 secondes
}
fetchAllData();
Exemple 3 : Gestion des erreurs avec try...catch
Les fonctions asynchrones permettent d'utiliser des blocs try...catch pour gérer les erreurs, ce qui rend le code plus lisible et gérable.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Une erreur est survenue'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Erreur :', error); // Affichera : Erreur : Une erreur est survenue après 1 seconde
}
}
fetchData();
Exemple 4 : Utilisation de async et await dans les méthodes de classe
Les fonctions asynchrones peuvent également être utilisées dans les méthodes de classe.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Données récupérées'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Affichera : Données récupérées après 1 seconde
});
Exemple 5 : Itérateurs asynchrones
Les itérateurs asynchrones permettent de travailler avec des flux de données qui arrivent de manière asynchrone.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Affichera 0, 1 et 2 avec un intervalle de 1 seconde
}
}
iterateAsyncGenerator();
GO TO FULL VERSION