Comment utiliser l'asynchrone en javascript

À mesure que les applications Web deviennent plus complexes, la programmation asynchrone devient de plus en plus importante. En JavaScript, nous pouvons utiliser le mot-clé async/await pour gérer les opérations asynchrones. Cet article présentera l'utilisation de base de l'async et fournira quelques exemples pour vous aider à mieux comprendre.

Qu'est-ce que l'asynchrone ?

La fonction async est une nouvelle méthode de programmation asynchrone introduite dans ES6. Le mot-clé async peut transformer une fonction JavaScript en fonction asynchrone, faisant en sorte que la fonction renvoie un objet Promise et la rende plus concise et claire lors de la gestion des opérations asynchrones. Les fonctions asynchrones sont souvent utilisées avec le mot-clé wait, qui suspend l'exécution de la fonction asynchrone jusqu'à ce que la promesse soit terminée.

La syntaxe de la fonction asynchrone est la suivante :

async function functionName() {
    //异步操作
}

Utilisation d'async

Lorsque vous utilisez des fonctions asynchrones, vous devez généralement utiliser des objets Promise en combinaison. Par exemple, si nous voulons obtenir une donnée distante, nous pouvons utiliser la fonction fetch :

async function fetchData() {
    const response = await fetch('http://example.com/data');
    const data = await response.json();
    return data;
}

Dans le code ci-dessus, nous créons une fonction asynchrone nommée fetchData et utilisons la fonction fetch pour lancer une requête à distance. Puisque la fonction fetch est une opération asynchrone, nous devons utiliser le mot-clé wait pour attendre la fin de l'objet Promise. Nous pouvons utiliser l'affectation de déstructuration pour stocker les données obtenues dans les données variables et les renvoyer une fois la promesse renvoyée par wait terminée.

Gestion de plusieurs objets Promise

Lorsque nous devons traiter plusieurs objets Promise, nous pouvons utiliser la méthode Promise.all(). La méthode Promise.all() combine les objets Promise en un objet Promise et renvoie un tableau contenant les résultats de chaque objet Promise lorsque tous les objets Promise réussissent. Si l’un des objets Promise échoue, cette méthode renverra immédiatement un objet Promise ayant échoué et n’attendra plus l’objet Promise en attente.

Par exemple, si nous voulons récupérer des données de deux sources de données distantes en même temps et opérer après qu'elles aient toutes deux été obtenues, nous pouvons opérer comme ceci :

async function fetchData() {
    const [data1, data2] = await Promise.all([(async () => {
        const response = await fetch('http://example.com/data1');
        return response.json();
    })(), (async () => {
        const response = await fetch('http://example.com/data2');
        return response.json();
    })()]);
    console.log(data1, data2);
}

Dans le code ci-dessus, nous créons un fichier appelé fonction asynchrone fetchData , et a utilisé la méthode Promise.all() pour attendre les données de deux sources de données distantes. Nous avons utilisé une fonction auto-exécutable et le mot-clé async/await pour récupérer deux sources de données et les former en un tableau d'objets Promise. Lorsque les données des deux sources de données ont été entièrement analysées, nous les stockons dans les variables data1 et data2 et effectuons une journalisation simple sur la console.

Gestion des erreurs

Lors du traitement des erreurs dans les fonctions asynchrones, nous utilisons généralement des instructions try/catch. Étant donné que la fonction asynchrone renvoie un objet Promise, lorsque nous levons une exception, l'objet Promise renvoyé sera rejeté. Nous pouvons intercepter cette exception dans un bloc catch et la gérer.

Par exemple, nous pouvons rencontrer une exception d'échec de demande réseau, comme indiqué ci-dessous :

async function fetchData() {
    try {
        const response = await fetch('http://example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

Dans le code ci-dessus, nous avons créé une fonction asynchrone nommée fetchData et utilisé des instructions try/catch pour gérer l'exception d'échec des demandes réseau. Si la demande aboutit, nous stockons les données dans la variable data et les renvoyons. Sinon, nous imprimons l'erreur sur la console.

Conclusion

Le mot-clé async/await est un moyen pratique pour JavaScript de gérer la programmation asynchrone. L’utilisation de async/await permet d’obtenir un code plus propre, plus facile à lire et à comprendre. Lorsque vous devez gérer plusieurs opérations asynchrones ou gérer des erreurs, vous pouvez également utiliser les instructions Promise et try/catch pour y parvenir. J'espère que cet article vous aidera !

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!