비동기 자바스크립트란?

먼저 동기 JavaScript 이해

이것은 당신이 한 번에 한 가지 일을 한다는 것을 의미합니다. 이것은 자연 상태의 JavaScript입니다. 모든 언어가 이와 같은 것은 아닙니다. 다음 코드를 고려하십시오.

console.log(1);
console.log(2);
console.log(3);

실행하면 콘솔에 다음과 같이 1, 2, 3이 순서대로 나타납니다.

1
2
3

첫 번째 줄부터 시작하여 완료되면 두 번째 줄로 이동하는 식으로 진행됩니다.

이것은 간단한 프로젝트에서는 잘 작동하지만 실제로 작동하는 웹 앱을 빌드하려면 서버 요청을 시작해야 합니다. 문제는 서버가 언제 우리가 필요한 정보로 응답할지 알 수 없다는 것입니다. 동기 JavaScript를 사용하면 대기라는 문제가 발생합니다.

현재 작업이 완료될 때까지 다음 작업으로 이동할 수 없음을 기억하십시오. 이는 매우 불쾌하고 투박한 사용자 경험을 만듭니다. 이를 해결하기 위해 무엇을 할 수 있습니까?

비동기 JavaScript 입력

비동기 JavaScript를 사용하면 서버에서 응답(즉, "콜백")을 기다리는 동안 다음 작업으로 이동할 수 있습니다. JavaScript 자체는 비동기가 아니라 JavaScript가 해당 기능을 활성화하는 상호 작용할 수 있는 다른 메커니즘이기 때문에 약간 잘못된 이름입니다.

아래 다이어그램을 살펴보겠습니다.

JavaScript는 브라우저에서 실행되며 정보(메모리 힙)와 작업이 완료되는 순서(콜 스택) 저장도 담당합니다. 웹 API, 콜백 큐 및 이벤트 루프는 비동기 코드를 작동시키는 요소입니다.

예시

코드를 처음부터 약간 변경해 보겠습니다.

console.log(1);
setTimeout(()=>console.log(2), 3000);
console.log(3);

이것은 우리에게 다음을 줄 것입니다:

1
3
2

setTimeout()이 실제로 JavaScript가 아니라 API라는 것을 알았을 때 놀랐습니다! console.log(2)(서버 요청 시뮬레이션)를 호출하기 전에 3초(이 경우)를 기다릴 수 있습니다. 한편, 브라우저는 다음 줄로 자유롭게 이동할 수 있습니다. 그래서 '3'이 '2'보다 먼저 나오는 것입니다. 이것은 작동 중인 비동기 JavaScript입니다.

조금 더 깊이 들어가면

위의 내용이 실제로 다이어그램에 따라 어떻게 분류되는지는 다음과 같습니다. 숫자 1부터 시작하여 7까지 계속하십시오.

브라우저가 코드의 첫 번째 줄을 읽습니다. 이것은 즉시 수행할 수 있음을 이해합니다.

함수를 호출 스택으로 이동합니다. 이 기능을 실행하는 데 다른 기능이 필요하지 않습니다

.

호출 스택에서 팝되고 실행되며 결과가 콘솔에 나타납니다.

브라우저가 코드의 두 번째 줄을 읽습니다. 결과를 기다려야 함을 이해하므로 뒤에서 플레이어에게 작업을 넘겨주고 계속 진행합니다.

브라우저가 코드의 세 번째 줄을 읽습니다. 이것은 즉시 수행할 수 있음을 이해합니다.

2단계를 반복합니다.

3단계를 반복합니다.

5-7단계가 진행되는 동안 setTimeout() 함수가 콜백 대기열에 전달되고 이벤트 루프가 호출 스택이 비어 있는지 확인하기 시작했습니다. 그럴 때 setTimeout() 함수는 호출 스택으로 이동되어 정상적으로 실행되었습니다. 그래서 우리는 한 번에 하나 이상의 일을 할 수 있었습니다. 이것은 비동기 자바스크립트입니다.

article의 이 Alexander Zlatkov에 대해 더 자세히 알아보십시오.