Maison >interface Web >js tutoriel >Maîtriser le JavaScript asynchrone : un guide des promesses et de l'asynchrone/de l'attente
La nature asynchrone de JavaScript est à la fois puissante et essentielle pour le développement Web moderne. De la récupération de données à partir des API à la gestion des entrées utilisateur, les opérations asynchrones sont courantes et nécessitent une gestion efficace. L'introduction de Promises dans ECMAScript 6 (ES6) et de Async/Await dans ECMAScript 2017 a révolutionné la façon dont les développeurs gèrent le code asynchrone, le rendant plus propre et plus lisible.
Dans ce blog, nous explorerons les Promesse et Async/Await, leur fonctionnement et quand les utiliser dans vos projets JavaScript.
JavaScript est monothread, ce qui signifie qu'une seule opération peut être exécutée à la fois. Cependant, les opérations asynchrones telles que les requêtes réseau, la lecture de fichiers ou les minuteries permettent à JavaScript de gérer des tâches qui autrement bloqueraient le thread principal, le rendant ainsi plus réactif aux actions de l'utilisateur.
Avant Promises et Async/Await, les opérations asynchrones étaient gérées à l'aide de rappels, ce qui conduisait souvent à un enfer des rappels - une structure de rappels profondément imbriquée et difficile à maintenir.
Une Promesse est un objet représentant l'achèvement (ou l'échec) éventuel d'une opération asynchrone. Il vous permet de gérer les tâches asynchrones de manière plus structurée que les rappels. Les promesses peuvent être dans l'un des trois états suivants :
Pour créer une promesse, vous transmettez une fonction avec deux arguments, résoudre et rejeter. À l'intérieur de la promesse, vous effectuez la tâche asynchrone et, en fonction du résultat, vous appelez soit la résolution (en cas de succès), soit le rejet (en cas d'échec).
const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const data = { name: 'Ishan', age: 25 }; resolve(data); }, 1000); }); };
Dans l'exemple ci-dessus, la fonction fetchData renvoie une promesse qui se résout après 1 seconde avec les données récupérées.
Vous pouvez gérer le résultat d'une promesse en utilisant .then() pour le succès et .catch() pour les erreurs.
fetchData() .then(data => { console.log(data); // { name: 'Ishan', age: 25 } }) .catch(error => { console.error('Error:', error); });
L'une des fonctionnalités les plus puissantes des promesses est leur capacité à enchaîner plusieurs opérations asynchrones. Le résultat d'un .then() peut être transmis au suivant.
fetchData() .then(data => { return data.name.toUpperCase(); // Modify data }) .then(upperName => { console.log(upperName); // 'ISHAN' }) .catch(error => { console.error('Error:', error); });
Les promesses disposent également de méthodes de combinateur intégrées qui permettent de gérer simultanément plusieurs opérations asynchrones.
Promise.all([fetchData(), fetchData()]) .then(results => console.log(results)) .catch(error => console.error(error));
Promise.race([fetchData(), fetchData()]) .then(result => console.log(result)) .catch(error => console.error(error));
Bien que les promesses aident à structurer le code asynchrone, le chaînage des appels .then() peut encore devenir complexe lorsqu'il s'agit de plusieurs opérations asynchrones. C'est là qu'intervient Async/Await. Introduit dans ES2017, async/await vous permet d'écrire du code asynchrone qui semble synchrone.
Pour utiliser async/await, vous marquez une fonction comme asynchrone, et à l'intérieur de cette fonction, vous utilisez le mot-clé wait avant une promesse. Cela oblige JavaScript à attendre que la promesse soit résolue (ou rejetée) avant de passer à autre chose.
const fetchData = () => { return new Promise((resolve) => { setTimeout(() => { resolve({ name: 'Ishan', age: 25 }); }, 1000); }); }; const getData = async () => { const data = await fetchData(); console.log(data); // { name: 'Ishan', age: 25 } }; getData();
Remarquez à quel point ce code est plus propre par rapport au chaînage des appels .then(). Il se lit comme du code synchrone mais fonctionne de manière asynchrone.
Lorsque vous utilisez async/await, vous pouvez gérer les erreurs avec try/catch, ce qui facilite la gestion des erreurs par rapport à l'utilisation de .catch() avec des promesses.
const getData = async () => { try { const data = await fetchData(); console.log(data); } catch (error) { console.error('Error:', error); } }; getData();
Cette approche rend la gestion des erreurs plus prévisible et conserve toute la logique dans un seul bloc de code.
Les promesses et async/await atteignent le même objectif de gestion des opérations asynchrones. Alors, quand faut-il utiliser l’un plutôt que l’autre ?
Utiliser les promesses lorsque :
Utiliser Async/Await quand :
One of the advantages of async/await is that it can be combined with promise combinators like Promise.all() to handle multiple asynchronous operations simultaneously.
const fetchData1 = () => { return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000)); }; const fetchData2 = () => { return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000)); }; const getAllData = async () => { try { const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]); console.log(data1, data2); // 'Data 1', 'Data 2' } catch (error) { console.error('Error:', error); } }; getAllData();
This approach allows you to run promises in parallel while still benefiting from the simplicity of async/await.
Promises and Async/Await are essential tools for managing asynchronous code in JavaScript. While promises provide a structured way to handle async tasks, async/await takes it to the next level by offering a cleaner and more readable syntax. Both approaches have their place, and knowing when to use them will make you a more efficient and effective JavaScript developer.
If you're new to asynchronous JavaScript, start with promises and experiment with async/await to see how they can transform the way you write code.
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!