객체 지향 JavaScript — 비동기 프로그래밍

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 기사에서는 JavaScript 비동기 프로그래밍을 살펴보겠습니다.

비동기 프로그래밍

비동기 프로그래밍은 JavaScript 앱의 가져오기 부분입니다.

동기식 프로그래밍인 대안 모드와 다릅니다.

동기 프로그래밍은 코드를 한 줄씩 실행하는 곳입니다.

그리고 비동기 프로그래밍은 일부 코드를 실행한 다음 결과를 기다리는 곳입니다.

결과를 기다리는 동안 대기열에 있는 다른 코드가 실행되도록 합니다.

그런 다음 결과가 얻어지면 결과를 기다리는 코드를 실행합니다.

이것은 우리가 한 줄씩 아무 것도 실행하지 않는다는 점에서 다릅니다.

코드를 대기열에 넣고 초기화했습니다.

그런 다음 결과가 계산되면 초기화된 코드를 실행하기 위해 돌아갑니다.

코드가 대기 중일 때는 대기 시간을 예측할 수 없습니다.

따라서 우리는 코드를 실행하고 다른 코드 조각을 실행하지 않고 결과를 기다릴 수 없습니다.

자바스크립트 호출 스택

호출 스택은 가장 최근에 호출된 함수의 레코드입니다.

예를 들어 다음이 있는 경우:

function c(val) {
  console.log(new Error().stack);
}

function b(val) {
  c(val);
}

function a(val) {
  b(val);
}
a(1);

그런 다음 우리는 다음을 얻습니다.

Error
    at c ((index):37)
    at b ((index):41)
    at a ((index):45)
    at (index):47

콘솔 로그에서.
a가 먼저 호출된 다음 b  , 그 다음 c  가 호출됩니다.
c가 반환되면 스택의 맨 위가 튀어나옵니다.

그리고 반환되면 b가 튀어 나옵니다.

그리고 마지막으로 a가 터집니다.

이벤트 루프

브라우저 탭은 단일 스레드에서 실행됩니다.

이벤트 루프에서 실행됩니다.

루프는 계속해서 메시지 대기열에서 메시지를 선택하고 관련 콜백을 실행합니다.

이벤트 루프는 다른 프로세스가 메시지 대기열에 작업을 추가할 때 메시지 대기열에서 작업을 계속 선택합니다.

타이머 및 이벤트 핸들러와 같은 프로세스는 병렬로 실행되고 대기열에 작업을 추가합니다.

타이머

setTimeout 함수는 타이머를 만들고 실행될 때까지 기다립니다.

타이머가 실행되면 작업이 메시지 대기열에 추가됩니다.

콜백과 밀리초 단위의 지속 시간이 필요합니다.

지속 시간에 도달하면 콜백이 실행됩니다.

콜백이 실행되면 브라우저의 다른 상호 작용이 차단됩니다.

콜백

노드는 고유한 콜백 스타일을 대중화했습니다.

콜백은 err 및 data 매개변수를 사용합니다.
err 오류 개체가 있습니다.
data 결과 데이터가 있습니다.

예를 들어 다음이 있습니다.

fs.readFile('/foo.txt', (err, data) => {
  if (err) throw err;
  console.log(data);
});

err 및 data  .
fs.readFile 파일을 비동기적으로 읽고 내용을 가져옵니다.

결론

JavaScript는 하나의 스레드에서만 실행되기 때문에 많은 비동기 코드가 필요합니다.

작업을 대기열에 넣은 다음 비동기식으로 실행해야 합니다.

이렇게 하면 메인 스레드를 유지하지 않습니다.