Maison  >  Article  >  interface Web  >  Comment implémenter l'asynchronie en javascript

Comment implémenter l'asynchronie en javascript

PHPz
PHPzoriginal
2023-05-20 19:25:051667parcourir

JavaScript est un langage de programmation couramment utilisé et largement utilisé dans le développement Web, le développement de jeux et d'autres domaines. Dans la programmation JavaScript, la programmation asynchrone est une technologie importante qui peut améliorer les performances et la vitesse de réponse du programme. Alors, comment JavaScript implémente-t-il la programmation asynchrone ? Cet article expliquera les aspects suivants.

1. Présentation de la programmation asynchrone

Pour avoir une compréhension approfondie de la programmation asynchrone en JavaScript, vous devez d'abord clarifier le concept de programmation asynchrone. La programmation asynchrone signifie que lorsque le programme exécute une action, il peut effectuer d'autres actions en même temps sans attendre la fin de l'action. Ce concept est très utile pour les programmes multithread et les situations où le temps d'attente lors de l'attente des données est très long. La programmation asynchrone est une bonne solution dans ces situations.

En JavaScript, il existe deux méthodes principales de programmation asynchrone : les fonctions de rappel et Promise.

2. Fonction de rappel pour implémenter la programmation asynchrone

La fonction de rappel est le moyen le plus couramment utilisé pour implémenter la programmation asynchrone en JavaScript. La fonction de rappel est généralement transmise en paramètre à la fonction asynchrone. Une fois la fonction asynchrone exécutée, le résultat est renvoyé via la fonction de rappel. Voici un exemple de code qui utilise des fonctions de rappel pour réaliser une implémentation asynchrone :

function asyncFunction(callback) {
    setTimeout(function() {
        callback('hello world');
    }, 1000);
}

asyncFunction(function(result) {
    console.log(result);
});

Dans le code ci-dessus, une fonction asynchrone nommée asyncFunction est d'abord définie, qui transmet une fonction de rappel en tant que paramètre. Dans la fonction, la fonction setTimeout est utilisée pour simuler une opération asynchrone, et une chaîne 'hello world' est passée en paramètre de la fonction de rappel après 1 000 millisecondes. Une fois l'exécution de la fonction terminée, le résultat est renvoyé via la fonction de rappel. Enfin, utilisez la fonction asyncFunction et transmettez la fonction de rappel pour obtenir le résultat de l'opération asynchrone. asyncFunction的异步函数,它传入一个回调函数作为参数。在函数中,使用setTimeout函数模拟了异步操作,1000毫秒后传递了一个字符串'hello world'作为回调函数的参数。在函数执行完成后,通过回调函数返回了结果。最后,使用asyncFunction函数并且传入回调函数来获取异步操作的结果。

回调函数实现异步的优点是比较简单易用,但是这种方式存在一个问题:回调地狱。如果多个异步操作要串联起来,就要嵌套多个回调函数,导致代码可读性下降,维护性困难。

三、Promise实现异步

为了解决回调地狱的问题,ES6引入了Promise。Promise是一种解决异步编程的技术,它使异步代码更加优雅和简洁。以下是使用Promise实现异步的示例代码:

function asyncFunction() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('hello world');
        }, 1000);
    });
}

asyncFunction().then(function(result) {
    console.log(result);
});

上面代码中,asyncFunction返回一个Promise对象。在Promise中,使用resolve函数来返回成功结果,使用reject函数来返回失败结果,将异步操作的结果通过then

L'avantage de l'implémentation de fonctions de rappel asynchrones est qu'elle est relativement simple et facile à utiliser, mais il y a un problème avec cette méthode : l'enfer du rappel. Si plusieurs opérations asynchrones doivent être connectées en série, plusieurs fonctions de rappel doivent être imbriquées, ce qui entraîne une lisibilité réduite du code et des difficultés de maintenance.

3. Promise implémente une implémentation asynchrone
  1. Afin de résoudre le problème de l'enfer des rappels, ES6 a introduit Promise. Promise est une technologie qui résout la programmation asynchrone et rend le code asynchrone plus élégant et concis. Voici un exemple de code permettant d'utiliser Promise pour réaliser une implémentation asynchrone :
  2. function asyncFunction() {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve('hello world');
            }, 1000);
        });
    }
    
    async function test() {
        const result = await asyncFunction();
        console.log(result);
    }
    
    test();
  3. Dans le code ci-dessus, asyncFunction renvoie un objet Promise. Dans Promise, utilisez la fonction resolve pour renvoyer un résultat réussi, utilisez la fonction reject pour renvoyer un résultat échoué et rappelez le résultat de l'opération asynchrone via le puis vers l'extérieur.
  4. Par rapport aux fonctions de rappel, Promise présente les avantages suivants :
  5. L'utilisation de la méthode then peut gérer les résultats de réussite et d'échec séparément ;

Prend en charge les appels en chaîne, évitant l'enfer des rappels

Peut combiner plusieurs opérations asynchrones Connectez-les dans un certain sens ; order ;

prend en charge l'exécution simultanée de plusieurs tâches asynchrones et attend que tous les résultats soient renvoyés avant de passer à l'étape suivante.

4. async/await implémente l'asynchronisme

En plus de Promise, ES8 introduit deux nouveaux mots-clés, async et wait. async est utilisé pour déclarer une fonction asynchrone, qui renvoie un objet Promise ; wait est utilisé pour attendre le résultat de l'objet Promise. async/await est une méthode de programmation asynchrone plus élégante qui peut remplacer les fonctions de rappel puis les méthodes. Voici un exemple de code qui utilise async/await pour réaliser une implémentation asynchrone :

rrreee

Dans le code ci-dessus, un test de fonction asynchrone est défini, qui attend le résultat de la fonction asynchrone via wait, puis utilise le résultat obtenu pour fonctionner. 🎜🎜L'avantage de async/await par rapport à Promise est qu'il est plus flexible et plus pratique, et que la structure du code est plus claire pour les scénarios qui doivent gérer plusieurs tâches asynchrones, async/await est également plus pratique et intuitif. 🎜🎜5. Résumé🎜🎜La programmation asynchrone JavaScript est l'une des technologies importantes dans le développement Web moderne et est très utile pour améliorer les performances du programme et la vitesse de réponse. Cet article présente comment JavaScript implémente la programmation asynchrone via des fonctions de rappel, des mots-clés Promise et async/await. Il est nécessaire de choisir la méthode de programmation asynchrone appropriée en fonction des besoins et des scénarios spécifiques. 🎜

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn