JS インタビュー プロセス中に発生した非同期の問題

js でのマクロタスクとマイクロタスク

(推奨チュートリアル: js チュートリアル)

面接プロセスでは、基本的に、 , 面接官はいくつかの約束の質問をします。約束は es6 の新しいコンテンツであり、主に非同期の問題を最適化するために使用されます。筆記試験ではPromiseやsetTimeoutの実行結果を書くことが問われることが多いので、マクロタスクとマイクロタスクの概念を知っておく必要があります！

promise を使用する理由

以前の jquery 開発プロジェクトを経験したことがある場合は、次の問題に遭遇するでしょう: コールバック地獄

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

原因分析:

ajaxリクエストのネストの理由は、2 番目のリクエストが依存するパラメータが最初のリクエストの結果にあるため、このようにネストし続ける必要があるためです。Ajax は非同期であり、内部の結果を外部から取得することはできません。この種のコードによって引き起こされる問題は、デバッグが難しく、結合が非常に高く、後で 1 か所を変更するのが面倒になることです。メンテナンスが非常に難しく、コードの可読性も低いです。
つまり、Ajax を最適化するために Promise が導入されました。Axios は Promise に基づいたリクエストのカプセル化ライブラリです。その最下層は JS ネイティブの XMLHTTPREQUEST.
promise().then().catch() チェーン スタイルの呼び出しに基づいています。複数のリクエストは、promise().then().then() にすることができます。

マクロ タスクとマイクロ タスクとは何ですか?

この問題を考えるときは、JavaScript がシングルスレッドのスクリプト言語であることを知っておく必要があります。つまり、そのコードはのみ 上から下に順番に実行され、一度に実行できるのは 1 つだけです。非同期はコールバック関数によって実現されます。 js をマルチスレッド言語として設計してみませんか?言語の目的によってその特性が決まります。js はもともとフォームの検証や定期的な判定、DOM 要素の操作に使用されていました。 js に複数のスレッドがあり、1 つは DOM 要素の変更を実行し、もう 1 つは削除を実行すると、ブラウザが混乱してしまいます。 ? ?したがって、言語の目的によってその特性が決まりますが、ブラウザはマルチスレッドであり、メインスレッドに加えて他のスレッドもあります。

js メイン プログラムが実行されると、メイン プログラム上の同期コードが最初に実行されます。setTimeout または setInterval に遭遇するとマクロ キューに入れられます。promise のコールバックに遭遇すると、マクロ キューに入れられます。マイクロ キューに入れられます。プログラムの実行では、最初にメイン プログラム コードが実行され、次に nextTick コードが実行され、次にマイクロタスク、最後にマクロタスクが実行されます。タスク キュー内のタスクは、順番に実行するためにキューに入れられます。async と await は組み合わせて使用​​されます。 await の後に Promise オブジェクトが続きます。次の段落を見てみましょう。コード:

 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

非同期と await での実行シーケンスを見てみましょう

コードは次のとおりです (例):

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

概要

JS はシングルスレッド言語です。その目的によってその特性が決まります。非同期操作ではイベント ループ メカニズムを使用して、最初に同期コードを実行し、次にマイクロタスク、最後にマクロタスクを実行します。 2 つのタスク キューはキューに入れられ、順番に実行されます。 await の背後にあるコードは、次のコードを実行する前に、promise が結果を返すのを待つ必要があります。await と async は、ジェネレーター関数の構文糖です。

以上がJS インタビュー プロセス中に発生した非同期の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。