Une lecture incontournable pour les débutants pour implémenter des méthodes asynchrones en js

Cette fois, je vous présente la méthode asynchrone implémentée en js que les novices doivent lire. Quelles sont les précautions que les novices doivent lire dans l'implémentation de js. Voici des cas réels, jetons un coup d'oeil.

Un jour, j'ai soudainement écrit une méthode pour appeler des données en arrière-plan et les afficher sur la première page, mais le résultat de sortie était toujours vide et indéfini, et aucune donnée n'était obtenue. Après avoir recherché des informations auprès de diverses sources, j'ai découvert que j'étais tombé dans le « gouffre » du JS asynchrone.

Nous entendons souvent les concepts de monothread, multithread, synchronisé et asynchrone, alors que sont exactement ces choses ?
Commençons donc par les concepts ci-dessus

Compréhension de base du monothread, du multithread, de la synchronisation et de l'asynchrone

Chaque programme en cours d'exécution (c'est-à-dire un processus) possède au moins un thread, appelé thread principal. Le thread principal est créé lors du démarrage du programme et est utilisé pour exécuter la fonction main.

1. Un seul thread est un thread avec un seul thread principal. Le code s'exécute séquentiellement de haut en bas. Le thread principal est responsable de l'exécution de tout le code du programme (affichage et actualisation de l'interface utilisateur, requêtes réseau, stockage local, etc. ) [Un fil fait tout. Je suis un peu fatigué rien que d'y penser]

2. Le multi-threading, comme son nom l'indique, est un programme comportant plusieurs threads qui peuvent être créés indépendamment par l'utilisateur. Plusieurs processus créés indépendamment par les utilisateurs sont des threads enfants par rapport au thread principal. Le thread enfant et le thread principal sont des unités d'exécution indépendantes et leurs exécutions respectives ne s'affectent pas, ils peuvent donc être exécutés simultanément.

Vous sentez-vous un peu étourdi rien qu’en écoutant ces théories arides ? Par coïncidence, j'avais aussi le vertige quand je l'ai vu pour la première fois.

En cherchant des informations, j'ai trouvé une métaphore si frappante chez les autres.

Par exemple, le mono-threading signifie que vous allez à la cuisine pour cuisiner et cuisiner, et qu'une personne fait des allers-retours ; le multi-threading signifie qu'il y a deux personnes, l'une qui cuisine seule et l'autre qui cuisine.

Donc ça devrait être plus facile à comprendre, non ?

Et qu’est-ce que le synchrone et l’asynchrone ?

Illustrons avec un exemple de vie simple.

Vous appelez un hôtel pour réserver un hôtel et demandez au personnel s'il y a des chambres. À ce moment-là, le personnel doit vérifier s'il y a des chambres avant de pouvoir vous répondre.

La synchronisation signifie ne pas raccrocher et attendre que le personnel vous dise s'il y a une chambre.
Asynchrone signifie raccrocher le téléphone, vous allez faire autre chose, comme manger et boire, et le personnel vous appellera après avoir trouvé l'information.

Voici donc notre sujet

Qu'est-ce que le fonctionnement asynchrone de JS ?

L'environnement d'exécution de JS est monothread, c'est-à-dire que lorsque le programme est exécuté séquentiellement, une seule tâche peut être exécutée à la fois. Si le programme veut continuer à s'exécuter, il doit attendre que la tâche en cours soit exécutée. , quel que soit le temps d'exécution de la tâche en cours (s'il est vraiment inconfortable d'attendre que les programmes suivants s'épuisent rapidement).

Afin de résoudre le problème de blocage inconfortable des programmes suivants. JavaScript a un mode de traitement asynchrone, qui est en fait un traitement retardé.

Donnons un autre exemple pour illustrer.

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

La fonction getUserInfo est appelée et la récupération des données en arrière-plan peut prendre beaucoup de temps. Cela nécessite que renderUserInfo attende que les données soient récupérées avant de pouvoir s'exécuter. Heureusement, JS propose des opérations asynchrones lors de la récupération des données, vous n'avez pas besoin d'attendre que renderUserInfo récupère les données, mais de les exécuter directement.

Ceci étant dit, dans quel ordre ces deux fonctions sont-elles exécutées ? Ne vous inquiétez pas, déboguons :

var getUserInfo = function () {
      console.log('aaa');
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log('bbb');
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log('ccc');
    renderUserInfo(data);

On pensait à l'origine que le résultat de l'exécution séquentielle était « aaa », « bbb », « ccc », n'est-ce pas ?

C'est-à-dire que lorsque la fonction exécute getJSON pour récupérer des données, le programme n'attend pas qu'elle récupère les données avant d'exécuter l'étape suivante, mais saute l'étape de récupération des données et exécute directement les données de sortie. est également vide.

C'est le mécanisme asynchrone de JS.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la stratégie de même origine JS et ajax dans les projets

Comment implémenter la lecture de trajectoire en toile

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!