Maison >interface Web >js tutoriel >Qu'est-ce que Javascript asynchrone ? A quoi ça sert ?

Qu'est-ce que Javascript asynchrone ? A quoi ça sert ?

不言avant: 2019-01-10 09:39:504863parcourir

Le contenu de cet article porte sur ce qu'est le javascript asynchrone ? A quoi ça sert ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Qu'est-ce que js asynchrone ?

Nous savons que JavaScript est monothread, ce qui est lié à son objectif. En tant que langage de script de navigateur, l'objectif principal de JavaScript est d'interagir avec les utilisateurs et de manipuler le DOM. Cela détermine qu'il ne peut être qu'un seul thread, sinon cela entraînera des problèmes de synchronisation très complexes. Par exemple, supposons que JavaScript ait deux threads en même temps. Un thread ajoute du contenu à un certain nœud DOM et l'autre thread supprime le nœud. Dans ce cas, quel thread le navigateur doit-il utiliser ?
Le soi-disant « fil unique » signifie qu'une seule tâche peut être accomplie à la fois. S'il y a plusieurs tâches, elles doivent être mises en file d'attente. Une fois la tâche précédente terminée, la tâche suivante sera exécutée, et ainsi de suite.
L'avantage de ce mode est qu'il est relativement simple à mettre en œuvre et l'environnement d'exécution est relativement simple ; l'inconvénient est que tant qu'une tâche prend beaucoup de temps, les tâches suivantes doivent être mises en file d'attente, ce qui retardera l'exécution. de l'ensemble du programme. L'absence de réponse courante du navigateur (mort suspendue) est souvent causée par un certain morceau de code Javascript exécuté pendant une longue période (comme une boucle infinie), ce qui bloque la page entière à cet endroit et empêche d'autres tâches d'être effectuées.
La requête synchrone d'Ajax entraînera le blocage du navigateur car elle verrouillera l'interface utilisateur du navigateur (boutons, menus, barres de défilement, etc.) et bloquera toutes les interactions de l'utilisateur. Ajax dans jquery a une telle requête synchrone. La fonction doit être utilisée avec prudence. , surtout lorsque la quantité de données demandées est importante, évitez d'utiliser des requêtes synchrones.
Citez quelques exemples pour vous sentir asynchrone
L'interface de fond utilise easy-mock, l'adresse officielle : https://easy-mock.com/
ajax utilise axios, le code de base est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript异步</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <button>点击</button>
  <script>
    {
      let myData = null
      //ajax请求
      function ajax() {
        axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
          .then(data => {
            console.log("ajax返回成功");// handle success
            myData = data.data
            console.log(myData);

          })
          .catch(error => {
            // console.log(error); // handle error
            console.log("ajax返回失败");
          })
      }
    }
  </script>
</body>
</html>

Voyons l'effet en ajoutant quelques js,

Asynchronous-Timer

      console.log(myData);
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

Sortie, il ne devrait y avoir aucun suspense

//null
//null
//定时器

Séquence d'exécution :
Exécutez le premier console.log(myData);
Ensuite, rencontrez le minuteur et suspendez le minuteur (c'est-à-dire suspendez le minuteur)
Continuez à exécuter le deuxième console.log(myData);
Il n'y a pas de code js exécutable, revenez en arrière et continuez à exécuter la tâche suspendue
Continuez à regarder la châtaigne suivante

Asynchrone-ajax

      console.log(myData);
      ajax()
      console.log(myData);

Regardez la sortie , toujours Pas de suspense

//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)

La séquence d'exécution est fondamentalement similaire au minuteur ci-dessus, je n'entrerai donc pas dans les détails ici.
Fusionnez les deux châtaignes, jetons un œil à la sortie de

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器

Avez-vous trouvé le problème ? Lorsque deux fonctions asynchrones se rencontrent, laquelle sera exécutée en premier ? Celui qui court le plus vite sera exécuté en premier ?
On peut dire qu'en fait, cela conduit à un autre point de connaissance,

File d'attente des tâches et boucle d'événements

Les deux console.log(myData) sont exécutés de manière synchrone, ils le sont ; tous deux exécutés sur le thread principal de js,
il y a une file d'attente de tâches en dehors du thread principal et la file d'attente de tâches stocke le contenu qui doit être exécuté de manière asynchrone
Lorsque le thread principal termine son exécution, les tâches dans la file d'attente des tâches sera exécuté. (Répétez continuellement l'analyse) jusqu'à ce que la file d'attente des tâches soit effacée

Observez ce code

      console.log(1);
      setTimeout(function () {
        console.log(2);
      }, 1000);
      console.log(3);

Sortie : 1, 3, 2, il n'y a rien à expliquer
Regardez sur un autre morceau de code

setTimeout(function(){console.log(1);}, 0);
console.log(2);

Sortie : 2, 1, pourquoi ?
console.log(2); est exécuté en premier dans le thread principal,
setTimeout(function(){console.log(1);}, 0); est placé dans la file d'attente des tâches,
uniquement Le contenu de la file d'attente des tâches ne sera exécuté que lorsque le thread principal aura fini de s'exécuter

Pourquoi devons-nous analyser en continu le contenu de la file d'attente des tâches une fois la tâche du thread principal terminée ?

Regarder ce code vous aidera à comprendre

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);
      const btn = document.querySelector('button')
      btn.onclick = () => {
        console.log("点击了");
      }

Nous avons ajouté un événement de clic au bouton du bouton et avons continué à cliquer sur le bouton pendant que le navigateur était actualisé (bien sûr, cliquez manuellement)
Regardez le résultat :

//null
//null
//(10次输出)点击了
//ajax返回成功
//{success: true, data: {…}}
//定时器
//点击了

Est-ce que cela permet de comprendre pourquoi le thread principal doit analyser la file d'attente des tâches en boucle ?
Chaque tour de la boucle d'événements est appelé un tick (pensez-vous à nextTick dans vue ?)
Lorsque l'interaction de l'utilisateur se produit (événement de clic de souris, événement de défilement de page, événement de changement de taille de fenêtre, etc.), ajax, Les minuteries, les minuteries, etc. ajouteront des événements à la file d'attente des tâches dans la boucle d'événements, puis attendront l'exécution

Quels sont les scénarios pour le front-end asynchrone ?

Tâches planifiées : setTimeout, setInverval
Requêtes réseau : requêtes ajax, chargement dynamique des images img
Liaison d'événement ou événement DOM, tel qu'un événement de clic, je ne sais pas quand il clique, mais avant de cliquer, que dois-je faire. Lors de l'enregistrement d'un type d'événement avec addEventListener, le navigateur aura un module séparé pour recevoir cette chose. Lorsque l'événement est déclenché, un certain module du navigateur lancera la fonction correspondante dans la file d'attente asynchrone Si maintenant Si la pile d'exécution est. vide, la fonction sera exécutée directement.
Promesse dans ES6

Quand l'asynchrone est-il requis :

Quand une attente peut survenir Situation
Lorsque le programme ne peut pas être bloqué comme une alerte pendant le processus d'attente
Par conséquent, toutes les "situations d'attente" doivent être asynchrones

En une phrase, vous devez utiliser asynchrone lorsque vous devez attendre mais que vous ne pouvez pas bloquer le programme

Asynchrone et Parallèle

Ne confondez pas asynchrone et parallèle,
Asynchrone est monothread, parallèle est multi-thread
Asynchrone : Les tâches du thread principal sont synchronisées Seulement après le l'exécution est terminée, les tâches asynchrones de la file d'attente des tâches seront exécutées séquentiellement
Parallèle : deux ou plusieurs chaînes d'événements sont exécutées alternativement au fil du temps, de sorte qu'à partir d'un niveau supérieur, elles semblent s'exécuter en même temps (bien que seules les poignées un événement à tout moment)

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Introduction à l'utilisation du transfert de valeurs et du bus d'événements (eventbus) dans les composants Vue non parent-enfantArticle suivant：Introduction à l'utilisation du transfert de valeurs et du bus d'événements (eventbus) dans les composants Vue non parent-enfant

Articles Liés

Voir plus