JavaScript asynchrone : promesses, asynchrone/attente et rappels

Publié à l'origine sur Makemychance.com

La programmation asynchrone est un concept central de JavaScript, qui vous permet d'effectuer des tâches sans bloquer l'exécution d'autres codes. Cela devient particulièrement important lorsqu'il s'agit d'opérations qui prennent du temps, telles que les requêtes réseau, les E/S de fichiers ou les minuteries. Dans cet article, nous explorerons les trois principales techniques de gestion du code asynchrone en JavaScript : rappels, promesses et asynchrone/attente.

1. Rappels

Les rappels sont le moyen le plus ancien de gérer les opérations asynchrones en JavaScript. Un rappel est simplement une fonction passée en argument à une autre fonction, qui est ensuite exécutée une fois la tâche terminée.

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

fetchData((message) => {
  console.log(message);
});

Dans l'exemple ci-dessus, fetchData simule une requête réseau avec setTimeout et la fonction de rappel enregistre le message une fois la requête terminée.

L'enfer des rappels

L'un des inconvénients de l'utilisation des rappels est le fameux « enfer des rappels » ou « pyramide du destin », où plusieurs rappels imbriqués rendent le code difficile à lire et à maintenir.

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. Promesses

Les promesses, introduites dans ES6, offrent une approche plus propre de la gestion des tâches asynchrones, aidant ainsi à surmonter les défis des rappels profondément imbriqués. Essentiellement, une promesse est un objet qui symbolise le résultat d'une opération asynchrone, qu'elle se termine avec succès ou échoue, et elle fournit un moyen structuré de gérer la valeur résultante.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Dans cet exemple, fetchData renvoie une promesse. La méthode .then() est utilisée pour gérer la valeur résolue de la promesse, et .catch() est utilisée pour gérer les erreurs.

Enchaîner les promesses

Les promesses peuvent être enchaînées, rendant le code plus lisible et maintenable.

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. Asynchrone/Attendre

Async/Await, introduit dans ES8 (2017), est un sucre syntaxique construit sur des promesses, donnant au code asynchrone l'apparence et le comportement d'un code synchrone.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

Dans cet exemple, la fonction processData utilise le mot-clé wait pour attendre que la promesse renvoyée par fetchData soit résolue. Cela rend le code beaucoup plus propre et plus facile à suivre par rapport au chaînage de promesses.

Gestion des erreurs

La gestion des erreurs dans async/await est effectuée à l'aide de blocs try...catch, offrant un moyen simple de gérer les erreurs sans avoir besoin d'une méthode .catch().

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

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!