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.
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,
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
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,
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
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
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 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
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
