Problèmes asynchrones rencontrés lors du processus d'entretien js

Macro-tâches et micro-tâches en js

(Tutoriel recommandé : Tutoriel js)

Pendant le processus d'entretien, en gros , l'intervieweur vous posera quelques questions de promesse. Promise est un nouveau contenu d'es6, qui est principalement utilisé pour optimiser les problèmes asynchrones. Lors de l'examen écrit, il vous est souvent demandé d'écrire quelques résultats d'exécution de promises et setTimeout, vous devez donc connaître les concepts de macro tâches et de micro tâches !

Pourquoi utiliser promise

Si vous avez déjà expérimenté des projets de développement jquery, vous rencontrerez les problèmes suivants : callback hell

$.ajax({
	...
	success: function() {
		...
		$.ajax({
			...
			success: function() {
				
			}
		})
		...
	}
})

Analyse des causes :

Ajax les requêtes sont imbriquées. La raison en est que les paramètres dont dépend ma deuxième requête sont dans les résultats de la première requête, ils doivent donc être imbriqués à tout moment. Ajax est asynchrone et les résultats à l'intérieur ne peuvent pas être obtenus de l'extérieur. Le problème causé par ce genre de code est qu'il est difficile à déboguer, le couplage est très élevé, et ce sera un casse-tête de changer d'endroit plus tard ! La maintenance est très difficile et la lisibilité du code est mauvaise.
Des promesses ont donc été introduites pour optimiser ajax. Axios est une bibliothèque d'encapsulation de requêtes basée sur des promesses. Leur couche inférieure est basée sur l'appel de style de chaîne XMLHTTPREQUEST natif js.
promise().then().catch(), plusieurs requêtes peuvent être promises().then().then().

Que sont les macro-tâches et que sont les micro-tâches ?

En réfléchissant à cette question, vous devez savoir que JavaScript est un langage de script monothread, ce qui signifie que son code peut seulement Il est exécuté séquentiellement de haut en bas, et une seule chose peut être faite à la fois. L'asynchrone est obtenu grâce aux fonctions de rappel. Pourquoi ne pas concevoir js comme un langage multithread ? Le but du langage détermine ses caractéristiques. js était à l'origine utilisé pour la validation de formulaires et le jugement régulier, ainsi que pour la manipulation des éléments DOM. Si js a plusieurs threads, l'un effectue la modification des éléments DOM et l'autre effectue la suppression, alors le navigateur sera confus. Que dois-je faire ? ? ? Ainsi, le but du langage détermine ses caractéristiques, mais le navigateur est multi-thread, et il existe d'autres threads en plus du thread principal.

Lorsque le programme principal js est exécuté, le code de synchronisation sur le programme principal est d'abord exécuté. Lorsqu'il rencontre setTimeout ou setInterval, il est placé dans la file d'attente des macros. Lorsqu'il rencontre le rappel de promesse, il l'est. placé dans la micro-file d'attente. L'exécution du programme exécute d'abord le code du programme principal, puis exécute le code nextTick, puis les microtâches et enfin les macrotâches sont mises en file d'attente pour une exécution en séquence et sont utilisées conjointement. wait est suivi d'un objet promise. Regardons le paragraphe suivant Code :

 setTimeout(function(){console.log(1)},0);  // 进入宏任务队列，最后执行宏任务
 new Promise(function(resolve,reject){
     console.log(2); //这句代码在promise构造器，同步执行
     resolve(); // 执行了resolve再把任务放入微队列
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6); // 主程序代码
 // 输出2,6,5,3,4,1
 
// 下面这个进阶代码
setTimeout(function(){console.log(1)},0); // 进入宏任务排序为1
new Promise(function(resolve,reject){
     console.log(2);
     // promise中执行完resolve()才会执行then(),而这里的resolve在宏任务里，执行完主程序代码后，还得先执行先进入宏队列中的程序
     setTimeout(function(){resolve()},0) // 进入宏任务排序为2
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6);
 // 输出的是  2 6 5 1 3 4

Regardez la séquence d'exécution en async et wait

Le code est le suivant (exemple) :

async function async1() {
    console.log(1); 
    await async2();
    console.log(2); //这里要等await执行成功才会执行，进入微任务，排序1
}
async function async2() {
    console.log(3);
}
console.log(4); //主程序代码
setTimeout(function() {
    console.log(5);
}, 0) //进入宏任务，最后执行
async1();
new Promise(function(resolve) {
    console.log(6); // 这句同步执行
    resolve(); 
}).then(function() {
    console.log(7); //进入微任务，排序2
});
console.log(8); // 主程序代码
// 输出的是  4,1,3,6,8,2,7,5

Résumé

JS est un langage monothread. Son objectif détermine ses caractéristiques. Les opérations asynchrones utilisent le mécanisme de boucle d'événements pour exécuter d'abord du code synchrone, puis des microtâches et enfin des macrotâches. dans les deux files d’attente de tâches sont mises en file d’attente et exécutées séquentiellement. Le code derrière wait doit attendre la promesse de renvoyer le résultat avant d'exécuter le code suivant Await et async sont du sucre syntaxique pour la fonction génératrice.

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!