비동기 JavaScript 익히기: Promise 및 Async/Await 가이드

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.

---

Comprendre le JavaScript asynchrone

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 callbacks, ce qui conduisait souvent à un enfer des rappels  -  une structure de rappels profondément imbriquée et difficile à maintenir.

---

Promesses : un pas en avant

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 :

• En attente : L'opération est toujours en cours.
• Réalisé : L'opération s'est terminée avec succès.
• Rejeté : L'opération a échoué.

Créer une promesse

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.

Consommer des promesses

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);
    });

• .then() : S'exécute lorsque la promesse est résolue.
• .catch() : S'exécute lorsque la promesse est rejetée.

Enchaîner les promesses

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);
    });

Combinateurs de promesses

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() : Attend que toutes les promesses soient résolues et renvoie un tableau de leurs résultats. Si une promesse est rejetée, la promesse entière est rejetée.

Promise.all([fetchData(), fetchData()])
    .then(results => console.log(results))
    .catch(error => console.error(error));

• Promise.race() : Renvoie le résultat de la première promesse à résoudre ou à rejeter.

Promise.race([fetchData(), fetchData()])
    .then(result => console.log(result))
    .catch(error => console.error(error));

---

Async/Await : le sucre syntaxique dépasse les promesses

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.

Utiliser async et attendre

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.

Gestion des erreurs avec try and catch

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.

---

Quand utiliser les promesses ou Async/Await

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 :

• Vous devez utiliser des combinateurs Promise comme Promise.all() ou Promise.race().
• Vous travaillez avec un petit nombre d'opérations asynchrones et le chaînage .then() est toujours gérable.

Utiliser Async/Await quand :

• You want cleaner, more readable code.
• You have multiple asynchronous operations that rely on each other's results.
• Error handling needs to be centralized and easier to manage.

---

Mixing Async/Await with Promise Combinators

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.

---

Conclusion

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.

위 내용은 비동기 JavaScript 익히기: Promise 및 Async/Await 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!