> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트의 약속

자바스크립트의 약속

Barbara Streisand
풀어 주다: 2024-10-20 14:34:02
원래의
529명이 탐색했습니다.

약속하다

현재 또는 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다.
약속 수명 주기:

  • 보류 중: 기능이 작동하기 시작합니다.

  • Fulfilled: 작업이 성공적으로 완료되었으며 결과 값이 있습니다.

  • 거부됨: 작업이 실패했으며 오류 개체가 있습니다.

약속 구문:

Promise는 두 개의 인수(Resolve 및 Reject)가 있는 함수를 사용하는 새로운 Promise 생성자를 사용하여 생성됩니다.

Promise in Javascript
코드 조각에는 새 Promise(비동기 작업을 처리하는 메서드가 있는 Promise 객체)를 반환하는 getUser라는 함수가 있습니다.

Promise 생성자 내부에는 데이터베이스에서 데이터를 가져오는 것과 같은 비동기 작업을 시뮬레이션하는 setTimeout 함수가 있습니다. Promise에는 두 가지 주요 메소드가 전달됩니다:

  • resolve: 작업이 성공하면 호출됩니다. 이 경우 id === 1이면 모의 사용자 객체 { id: 1, name: "Diana", email: "Diana@test.com" }를 반환합니다.

  • reject: 작업이 실패할 때 호출됩니다. ID가 1이 아닌 경우 "사용자를 찾을 수 없습니다..."라는 오류 메시지와 함께 Promise가 거부됩니다.

해결 및 거부 함수는 약속의 맥락에서 반환 문처럼 작동하여 호출자가 작업의 성공 또는 실패를 처리할 수 있도록 합니다.

약속을 연결하다

Promise를 연결하여 일련의 비동기 작업을 순차적으로 수행할 수 있습니다.

Promise in Javascript

이 예에서는 데이터 가져오기를 단계별로 시뮬레이션하기 위해 여러 Promise를 연결합니다.

  • 먼저 getUser(1)를 호출하여 사용자 데이터를 가져옵니다. 성공하면 다음 단계로 넘어갑니다.

  • 둘째, getOrders(user.id)를 호출하여 user.id를 사용하여 해당 사용자의 주문을 받습니다.

-셋째, 목록에서 두 번째 주문(orders[1])을 선택하고 getOrderDetails(orders[1])를 사용하여 해당 세부정보를 가져옵니다.

언제든지 문제가 발생하면(예: 사용자를 찾을 수 없거나 주문이 누락된 경우) 해당 오류는 .catch() 블록에 포착되어 표시됩니다.

간단한 분석:

  • 사용자에게 문의합니다.
  • 사용자를 찾으면 주문을 요청합니다.
  • 주문을 받으면 주문 중 하나에 대한 세부정보를 묻습니다.
  • 무엇이든 문제가 있는 경우(예: 사용자 또는 주문을 찾을 수 없는 경우) - 오류가 표시됩니다.

결과:

Promise in Javascript

이 접근 방식을 사용하면 지저분한 코드 대신 깔끔하고 단계별로 비동기 작업을 더 쉽게 수행할 수 있습니다.

약속 방법:

Promise.all(): 여러 Promise를 병렬로 실행하고 모두 해결될 때까지 기다립니다.

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);  // Array of all fulfilled values
  });

로그인 후 복사

예:

Promise in Javascript

(콜백에 대한 이 접근 방식을 읽고 비교하는 것이 좋습니다)

위 내용은 자바스크립트의 약속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿