Maîtriser la programmation asynchrone en JavaScript

La programmation synchrone est un concept crucial en JavaScript, vous permettant de gérer des opérations telles que les appels d'API, la lecture de fichiers et les minuteries sans bloquer le thread principal. Si vous êtes nouveau dans le concept ou si vous souhaitez consolider votre compréhension, cet article est fait pour vous !

Qu’est-ce que la programmation asynchrone ?

En programmation synchrone, les tâches sont exécutées les unes après les autres, ce qui peut conduire à une utilisation inefficace des ressources, notamment lorsqu'il s'agit d'opérations qui prennent du temps (comme les requêtes réseau). La programmation asynchrone permet à votre code de s'exécuter en attendant la fin de ces opérations, améliorant ainsi les performances et la réactivité.

Concepts clés

1. Rappels
2. Promesses
3. Async/Attendre

Décomposons chacun de ces concepts.

1. Rappels

Un rappel est une fonction qui est passée en argument à une autre fonction et qui est exécutée une fois qu'une tâche est terminée. Bien que simples, les rappels peuvent conduire à un « enfer de rappel » lorsque vous avez des fonctions imbriquées.

function fetchData(callback) {
    setTimeout(() => {
        const data = "Data received!";
        callback(data);
    }, 1000);
}

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

**2. Promesses
**Les promesses offrent une alternative plus propre aux rappels. Une promesse représente une valeur qui peut être disponible maintenant, ou dans le futur, ou jamais. Il peut être dans l'un des trois états suivants : en attente, exécuté ou rejeté.

Voici comment utiliser les promesses :

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data received!";
            resolve(data); // or reject(error);
        }, 1000);
    });
}

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

**3. Asynchrone/Attendre

Introduits dans ES2017, async et wait offrent une manière plus lisible de travailler avec les promesses. Vous définissez une fonction comme asynchrone et, dans cette fonction, vous pouvez utiliser wait pour suspendre l'exécution jusqu'à ce qu'une promesse soit résolue.

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

async function getData() {
    try {
        const data = await fetchData();
        console.log(data); // Output: Data received!
    } catch (error) {
        console.error(error);
    }
}

getData();

Gestion des erreurs

Lorsque vous travaillez avec du code asynchrone, une gestion appropriée des erreurs est essentielle. Avec les promesses, vous pouvez utiliser.catch(), et avec async/await, vous pouvez utiliser des blocs try/catch.

Exemple concret

Mettons cela dans son contexte. Voici un exemple de récupération de données à partir d'une API à l'aide de fetch, qui renvoie une promesse :

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error("Fetch error:", error);
    }
}

fetchUserData(1);

Conclusion

La programmation asynchrone en JavaScript permet d'écrire du code efficace et réactif. En maîtrisant les rappels, les promesses et l'async/wait, vous serez bien équipé pour gérer les opérations asynchrones avec élégance.

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!