그렇게 어렵지 않아요! 자바스크립트의 `Promise`를 이해하려면

이 글의 내용은 Javascript 초보자에게 매우 적합합니다. 간단하고 이해하기 쉬운 언어로 설명되어 있으니 이해하지 못할 걱정은 안하셔도 됩니다.

약속해, 너는 왜 존재하는 걸까?

Promise는 현대 자바스크립트 언어를 배울 때 없어서는 안 될 지식 포인트입니다. 많은 사람들이 이 책을 읽을 때 혼란스러워합니다. 그 주된 이유는 한 문장으로 요약됩니다.

더 이상 코드가 위에서 아래로 실행되지 않습니다.

보통 우리가 작성하는 코드는 순차적으로 실행됩니다. 예를 들어 1부터 3까지 세는 코드를 작성합니다.

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

F12를 눌러 브라우저의 콘솔을 열고 위의 코드를 복사한 후 Enter를 누르면 1부터 3까지의 숫자가 순서대로 출력되는 것을 확인할 수 있습니다.

1
2
3

이제 코드 순서는 변경할 수 없지만 최종 인쇄 순서는 코드 순서와 독립적이어야 한다는 요구 사항이 있는 경우 이렇게 할 수 있나요?

세 사람이 각각 1, 2, 3을 인쇄한다고 가정하면 매우 간단할 것입니다. 동시에 숫자를 인쇄하는 작업을 알려주기만 하면 되며, 인쇄 순서는 작업의 실행 시간에만 관련됩니다.

약속, 마법의 효과

그렇다면 인쇄 작업을 세 사람에게 어떻게 할당할까요? 여기에서 Promise가 사용됩니다. 새로운 Promise 객체를 생성함으로써 현재 "프로세스"에서 코드를 실행하는 대신 새로운 "프로세스"에 코드 섹션을 할당할 수 있습니다. 여기서 말하는 '프로세스'는 우리가 흔히 이야기하는 운영체제 프로세스와 동일하지 않으며, 코드를 순차적으로 실행하는 가상 단위를 나타내는 추상적인 개념일 뿐이라는 점을 참고하세요.

약속, 조립 지침

방금 말했듯이 새로운 "프로세스"로 간주될 수 있으므로 어떤 코드를 실행하고 싶다면 이를 함수로 래핑하여 제공할 수 있습니다. 이런 식으로 코드가 즉시 실행되지는 않습니다.

Promise는 두 가지 기능도 제공합니다. 하나는 해결이고 다른 하나는 거부이며, 작업이 완료되고 실패할 때 각각 호출할 수 있습니다. 이 두 함수는 Promise의 내부 매개변수로 전달됩니다. 따라서 다음과 같이 조립할 수 있습니다.

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)

여기서는 setTimeout을 사용하여 시간이 많이 걸리는 작업을 시뮬레이션합니다. 실제 시나리오에서 이 작업은 파일 읽기, 네트워크 인터페이스 요청 또는 사용자 입력 대기 등일 수 있습니다. 작업이 완료되면 해결 함수를 호출하여 작업이 완료되었음을 나타냅니다.

완전한 코드

그런 다음 동일한 방법을 따르고 나머지 두 개를 조립할 때 서로 다른 인쇄 번호와 작업에 필요한 시간만 제공하면 된다고 약속합니다. 마지막으로 전체 코드는 다음과 같습니다. 콘솔에 복사하여 사용해 보세요.

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(2)
      resolve()
    }, 200)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(3)
      resolve()
    }, 100)
  }
)

마지막으로 숫자가 인쇄되는 순서는 작업 실행 시간과 관련이 있습니다.

3
2
1

약속, 동시성 모델

동시 프로그래밍은 제한된 수의 CPU 코어에서 동시에 많은 수의 작업 실행을 시뮬레이션하는 방법에 관한 것입니다. Javascript의 Promise는 편리하고 빠른 동시 프로그래밍 방법은 물론 반환 값과 오류 값을 처리하기 위한 사양 세트를 제공합니다. 이 사양을 이해하고 익숙해지면 동시 작업 처리의 효율성을 크게 향상시킬 수 있습니다.

위 내용은 그렇게 어렵지 않아요! 자바스크립트의 `Promise`를 이해하려면의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!