Async et attendre en JavaScript

Introduction au JavaScript asynchrone

JavaScript est monothread, ce qui signifie qu'il ne peut exécuter qu'une seule tâche à la fois. Pour gérer plusieurs tâches, notamment les opérations d'E/S telles que les requêtes API ou la lecture de fichiers, JavaScript utilise la programmation asynchrone. Cela permet à d'autres tâches de continuer à s'exécuter en attendant la fin des opérations de longue durée.

Fonctions de rappel

Au départ, les tâches asynchrones en JavaScript étaient gérées à l'aide de fonctions de rappel. Un rappel est une fonction passée dans une autre fonction en tant qu'argument, qui est ensuite exécutée une fois l'opération terminée.

Exemple :

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

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

Promesses

Des promesses ont été introduites pour gérer plus efficacement les opérations asynchrones. Une promesse représente une valeur qui peut être disponible maintenant, ou dans le futur, ou jamais.

Exemple :

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

Asynchrone/Attente

Async/Await est un sucre syntaxique construit sur Promises, donnant au code asynchrone l'apparence et le comportement comme du code synchrone. Cela rend le code plus facile à lire et à comprendre.

Utilisation de base

1. Fonction Async : Une fonction déclarée avec le mot-clé async renvoie une promesse.
2. Await Keyword : Le mot-clé wait ne peut être utilisé que dans une fonction asynchrone. Cela fait attendre JavaScript jusqu'à ce que la promesse soit résolue ou rejetée.

Exemple :

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

    let result = await promise; // Wait until the promise resolves
    console.log(result);
}

fetchData();

Gestion des erreurs

Avec async/await, la gestion des erreurs devient simple à l'aide des blocs try...catch.

Exemple :

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

Exécution parallèle

Pour exécuter plusieurs opérations asynchrones en parallèle, Promise.all peut être utilisé avec async/await.

Exemple :

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

Concepts avancés

Exécution séquentielle

Si les tâches doivent être exécutées séquentiellement, utilisez wait les unes après les autres.

Exemple :

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

Combiner Async/Await avec des promesses traditionnelles

Vous pouvez combiner async/await avec les méthodes Promise traditionnelles comme then et catch.

Exemple :

async function fetchData() {
    let data = await fetch('https://api.example.com/data');
    return data.json();
}

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

Conclusion

Async/Await simplifie l'utilisation des opérations asynchrones en JavaScript en fournissant un moyen plus propre et plus lisible d'écrire du code asynchrone. Il remplace efficacement les rappels et rend le travail avec Promises plus intuitif.

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!