JavaScript 약속 및 가져오기

약속

레스토랑

JavaScript의 Promise는 보류 중인 작업일 뿐입니다. 이는 레스토랑에서 음식을 주문하는 것과 같습니다. 주문을 하면 서버는 주문한 음식을 가져오겠다고 약속합니다. 음식이 식탁에 오르면 약속이 이루어진 것입니다. 주방에 주요 재료가 부족하여 주문한 음식을 제공할 수 없는 경우에는 다른 곳에서 식사를 하시면 됩니다.

이것은 모두 비동기식입니다. 테이블에 앉아 친구와 수다를 떨거나 휴대폰으로 스크롤을 하고 있을 수도 있습니다. 서버에게 주문을 하기 위해 하던 일을 일시 중지한 다음, 이전에 하던 일을 다시 시작합니다.

JavaScript도 비슷한 작동을 보장합니다. JavaScript는 단일 스레드이므로 Promise를 사용하면 JavaScript 엔진이 특정 작업이 완료되기를 기다리는 동안 다른 작업으로 이동할 수 있습니다.

자바스크립트

Promise는 특정 유형의 개체입니다. 모든 Promise는 보류 상태에서 시작됩니다. 실행자라고 불리는 Promise 내부의 콜백 함수는 언제 Promise를 해결하거나 거부할지 정의합니다.

약속 만들기:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})

약속 사용

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));

술책

fetch는 Promise를 반환하는 JavaScript의 내장 함수입니다. HTTP 요청을 만들고 .then() 및 .catch()를 사용하여 응답을 비동기적으로 처리할 수 있습니다.

가져오기() 사용

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');

호출 스택 및 이벤트 루프

콜 스택은 동기 작업을 관리하고 실행 순서를 추적합니다. 이는 매우 간단합니다. 작업은 작성된 순서대로 실행됩니다.

그러나 비동기 작업은 이벤트 루프에 의해 처리됩니다. 이벤트 루프를 사용하면 비동기 코드가 순서 없이 실행될 수 있으므로 JavaScript 엔진이 기다리지 않고 다른 작업을 계속할 수 있습니다.

예

어떻게 실행되나요?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");

순서대로 실행될 것이라고 예상할 수도 있지만 그렇지 않습니다. JavaScript 이벤트 루프는 이러한 명령을 다르게 처리합니다.
실제로 결과는 다음과 같습니다.

> console log first!
> console log last!!!
> promise third
> set timeout second!

왜?

이벤트 루프는 실행 우선순위를 재정렬합니다.

1. 동기 작업(예: console.log("console log first!") 및 console.log("console log last!!!"))는 나타나는 순서대로 즉시 실행됩니다.
2. 마이크로 작업(예: Promise 콜백)에는 다음 우선순위가 부여되며 다른 비동기 작업보다 먼저 실행됩니다.
3. 시간 초과가 0으로 설정된 경우에도 매크로작업(예: setTimeout)은 마지막으로 처리됩니다.

이렇게 하면 JavaScript 엔진이 비동기식으로 작동하여 모든 작업이 즉시 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.

Unsplash의 Andrew Petrov 표지 사진

위 내용은 JavaScript 약속 및 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!