Maîtriser le JavaScript asynchrone : rappels, promesses et Async/Await

JavaScript asynchrone

JavaScript asynchrone permet d'exécuter des tâches indépendamment du thread principal, garantissant ainsi que l'application reste réactive et efficace. Ceci est particulièrement important pour la gestion des opérations telles que les appels d'API, la lecture de fichiers ou les retards.

1. Code synchrone ou asynchrone

Code synchrone :

• Exécute ligne par ligne dans l'ordre.
• Bloque les opérations suivantes jusqu'à la fin de l'opération en cours.

Exemple:

console.log("Start");
console.log("End");
// Output:
// Start
// End

Code asynchrone :

• Permet à d'autres opérations de continuer en attendant la fin d'une tâche.
• Utilise des rappels, des promesses ou async/wait pour gérer les résultats.

Exemple:

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

2. Méthodes de programmation asynchrone

a. Rappels

Un rappel est une fonction passée en argument à une autre fonction, exécutée après l'achèvement d'une tâche asynchrone.

Exemple :

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

Inconvénients :

• Mène à "l'enfer des rappels" lors de l'enchaînement de plusieurs opérations asynchrones.

b. Promesses

Une promesse représente une valeur qui peut être disponible maintenant, dans le futur ou jamais.

États d'une promesse :

• En attente : état initial.
• Réalisé : terminé avec succès.
• Rejeté : échec.

Créer une promesse :

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

Gestion des erreurs :

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

c. Asynchrone/Attendre

async et wait fournissent une syntaxe plus lisible pour travailler avec les promesses.

Exemple :

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

Gestion des erreurs :

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

3. Cas d'utilisation asynchrone

a. Appels API avec Fetch

L'API fetch est un moyen moderne d'effectuer des requêtes HTTP.

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b. Auditeurs d'événements

Comportement asynchrone dans la gestion des événements.

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c. Minuteries

Utilisation de setTimeout et setInterval pour les retards.

setTimeout(() => console.log("Timeout executed!"), 2000);

4. La boucle événementielle

L'Event Loop est le mécanisme qui gère les opérations asynchrones en JavaScript. Les tâches sont mises en file d'attente et exécutées dans l'ordre suivant :

1. Call Stack : exécute le code synchrone.
2. File d'attente des tâches : exécute des rappels asynchrones (par exemple, setTimeout).
3. File d'attente de microtâches : exécute les résolutions de promesses.

Exemple :

console.log("Start");
console.log("End");
// Output:
// Start
// End

5. Pièges courants

1. Oublier de gérer les erreurs :

   • Utilisez toujours .catch() ou try/catch pour les promesses.

2. Bloquer le fil de discussion principal :

   • Évitez les tâches synchrones de longue durée.

3. L'enfer de rappel :

   • Utilisez plutôt des promesses ou asynchrone/attendez.

6. Résumé

Comprendre et exploiter la programmation asynchrone en JavaScript est crucial pour créer des applications Web réactives et efficaces. En maîtrisant les rappels, les promesses et l'async/wait, les développeurs peuvent gérer efficacement les tâches asynchrones.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!