JS 인터뷰 프로세스 중 발생하는 비동기 문제

js의 매크로 작업 및 마이크로 작업

(권장 튜토리얼: js 튜토리얼)

면접 과정에서 기본적으로 면접관은 몇 가지 약속 질문을 할 것입니다. Promise는 주로 es6의 새로운 콘텐츠입니다. 비동기 문제를 최적화합니다. 필기시험에서는 Promise 및 setTimeout의 일부 실행 결과를 작성하라는 요청이 자주 나오므로 매크로 작업과 마이크로 작업의 개념을 알아야 합니다!

Promise를 사용하는 이유

이전 jquery 개발 프로젝트를 경험한 경우 다음과 같은 문제에 직면하게 됩니다. 콜백 지옥

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

원인 분석:

ajax 요청 중첩, 이유는 두 번째 요청이 의존하는 매개 변수입니다. 첫 번째 요청의 결과는 항상 중첩되어야 합니다. Ajax는 비동기식이므로 내부 결과를 외부에서 얻을 수 없습니다. 이런 종류의 코드로 인해 발생하는 문제는 디버깅이 어렵고, 결합도가 매우 높으며, 나중에 한 곳을 변경하는 것이 골치 아픈 일이 된다는 것입니다! 유지 관리가 매우 어렵고 코드 가독성도 떨어집니다.
Ajax를 최적화하기 위해 Promise가 도입되었습니다. Axios는 Promise 기반 요청 캡슐화 라이브러리입니다. 해당 하위 계층은 js 기본 XMLHTTPREQUEST.
promise().then().catch() 체인 호출을 기반으로 하며 더 많은 요청이 가능합니다. 약속().then().then().

매크로 작업은 무엇이고 마이크로 작업은 무엇인가요?

이 질문에 대해 생각할 때 JavaScript는 단일 스레드 스크립트 언어라는 것을 알아야 합니다. 즉, 해당 코드는 위에서 아래로 순차적으로만 실행될 수 있습니다. 한 번에 하나의 작업만 수행하기 위해 콜백 함수를 통해 비동기식을 달성합니다. js를 멀티스레드 언어로 디자인하면 어떨까요? 언어의 목적에 따라 특성이 결정됩니다. js는 원래 양식 유효성 검사 및 정기적인 판단과 DOM 요소 조작에 사용되었습니다. js에 여러 개의 스레드가 있고 하나는 DOM 요소를 수정하고 다른 하나는 삭제를 수행하는 경우 브라우저는 어떻게 해야 합니까? ? ? 그래서 언어의 목적에 따라 그 특성이 결정되는데, 브라우저는 멀티스레드이고, 메인 스레드 외에 다른 스레드도 존재합니다.

js 메인 프로그램이 실행되면 메인 프로그램의 동기화 코드가 먼저 실행됩니다. setTimeout이나 setInterval을 만나면 매크로 큐에 들어가고 promise의 콜백을 만나면 마이크로에 들어갑니다. 프로그램이 먼저 실행되고, 그 다음에는 nextTick 코드가 실행되고, 그 다음에는 마이크로 작업, 그리고 마지막으로 매크로 작업이 실행을 위해 대기열에 추가되며, 비동기 및 대기가 함께 사용됩니다. wait 뒤에는 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

async의 실행 순서를 살펴보고 다시 wait

코드는 다음과 같습니다(예제).

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

Summary

js는 단일 스레드 언어의 목적에 따라 특성이 결정됩니다. 비동기 작업은 이벤트 루프 메커니즘을 사용하여 동기 코드를 먼저 실행한 다음 마이크로 작업, 마지막으로 매크로 작업을 실행하며 두 작업 대기열의 작업이 대기열에 추가되어 순차적으로 실행됩니다. Wait 뒤에 있는 코드는 다음 코드를 실행하기 전에 Promise가 결과를 반환할 때까지 기다려야 합니다.

위 내용은 JS 인터뷰 프로세스 중 발생하는 비동기 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!