Während des js-Interviewprozesses sind asynchrone Probleme aufgetreten

Makroaufgaben und Mikroaufgaben in js

(Empfohlenes Tutorial: js-Tutorial)

Während des Interviewprozesses wird Ihnen der Interviewer grundsätzlich einige Versprechensfragen stellen. Promise ist ein neuer Inhalt von es6, der hauptsächlich daran gewöhnt ist Optimieren Sie asynchrone Probleme. In der schriftlichen Prüfung werden Sie häufig gebeten, einige Ausführungsergebnisse von Versprechen und setTimeout aufzuschreiben, daher müssen Sie die Konzepte von Makroaufgaben und Mikroaufgaben kennen!

Warum Versprechen verwenden?

Wenn Sie Erfahrung mit früheren JQuery-Entwicklungsprojekten haben, werden Sie auf die folgenden Probleme stoßen: Rückrufhölle

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

Ursachenanalyse:

Ajax-Anfrageverschachtelung, der Grund sind die Parameter, von denen meine zweite Anfrage abhängt Das Ergebnis der ersten Anfrage muss ständig verschachtelt sein. Ajax ist asynchron und das Ergebnis im Inneren kann nicht von außen abgerufen werden. Das durch diese Art von Code verursachte Problem besteht darin, dass das Debuggen schwierig ist, die Kopplung sehr hoch ist und es später Kopfschmerzen bereiten wird, eine Stelle zu ändern! Die Wartung ist sehr schwierig und die Lesbarkeit des Codes ist schlecht.
So wurden Versprechungen eingeführt, um Ajax zu optimieren. Ihre unterste Ebene basiert auf js nativen XMLHTTPREQUEST.
promise().then().catch()-Kettenaufrufen und mehr versprechen().then().then().

Was ist eine Makroaufgabe und was ist eine Mikroaufgabe?

Wenn Sie über diese Frage nachdenken, müssen Sie wissen, dass JavaScript eine Single-Threaded-Skriptsprache ist, das heißt, ihr Code kann nur sequentiell von oben nach unten ausgeführt werden , und jeweils nur eine Aufgabe Um eine Aufgabe zu erledigen, wird Asynchronität durch Rückruffunktionen erreicht. Warum nicht js als Multithread-Sprache entwerfen? Der Zweck der Sprache bestimmt ihre Eigenschaften. js wurde ursprünglich zur Formularvalidierung und regulären Beurteilung sowie zur Manipulation von DOM-Elementen verwendet. Wenn js mehrere Threads hat, einer die Änderung von DOM-Elementen durchführt und ein anderer das Löschen durchführt, ist der Browser verwirrt. Was soll ich tun? ? ? Der Zweck der Sprache bestimmt also ihre Eigenschaften, aber der Browser ist multithreaded und es gibt neben dem Hauptthread noch andere Threads.

Wenn das js-Hauptprogramm ausgeführt wird, wird der Synchronisationscode im Hauptprogramm zuerst ausgeführt. Wenn es auf setTimeout oder setInterval stößt, wird es in die Makrowarteschlange gestellt Warteschlange. Der Hauptprogrammcode führt dann den NextTick-Code aus, und schließlich werden die Aufgaben in der Aufgabenwarteschlange zur gemeinsamen Ausführung in die Warteschlange gestellt Darauf folgt ein Promise-Objekt. Schauen wir uns den folgenden Code an:

 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

Sehen Sie sich die Ausführungssequenz asynchron an und warten Sie erneut ab

Der Code lautet wie folgt (Beispiel):

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

Zusammenfassung

js ist ein Single -Threaded-Sprache. Asynchrone Operationen verwenden zuerst den Ereignisschleifenmechanismus, um dann Mikrotasks und schließlich Makrotasks auszuführen. Die Aufgaben werden in die Warteschlange gestellt und nacheinander ausgeführt. Der Code hinter „await“ muss auf das Versprechen warten, das Ergebnis zurückzugeben, bevor er den folgenden Code ausführt. „Await“ und „async“ sind syntaktische Zucker für die Generatorfunktion.

Das obige ist der detaillierte Inhalt vonWährend des js-Interviewprozesses sind asynchrone Probleme aufgetreten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!