> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 약속과 약속 연결 이해

JavaScript의 약속과 약속 연결 이해

Linda Hamilton
풀어 주다: 2024-09-24 10:30:30
원래의
497명이 탐색했습니다.

Understanding Promises and Promise Chaining in JavaScript

약속이란 무엇입니까?

JavaScript의 약속은 미래에 어떤 일을 하겠다고 하는 '약속'과 같습니다. 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 개체입니다. 간단히 말해서 Promise는 아직 사용할 수 없지만 미래에 있을 값에 대한 자리 표시자 역할을 합니다.

약속 상태

Promise는 세 가지 상태 중 하나로 존재할 수 있습니다.

  1. 보류 중: Promise의 초기 상태로, 아직 비동기 작업이 완료되기를 기다리고 있습니다.
  2. 이행됨: Promise가 성공적으로 완료되어 결과 값을 사용할 수 있는 상태입니다.
  3. 거부됨: Promise가 실패하고 예상 값 대신 오류가 반환되는 상태입니다.

약속은 어떻게 작동하나요?

Promise는 두 가지 매개변수(Resolve 및 Reject)를 사용하는 Promise 생성자를 사용하여 생성됩니다. 둘 다 함수입니다.

비동기 작업이 성공하면 Resolve 함수를 호출하여 약속을 이행합니다.
문제가 발생하면 거부 함수를 호출하여 오류로 인해 Promise가 거부되었음을 나타냅니다.
성공의 경우 .then()을 사용하고 오류 처리의 경우 .catch()를 사용하여 Promise의 결과를 처리할 수 있습니다.

예: Promise 생성 및 소비

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });
로그인 후 복사

Resolve(data)는 Promise가 이행되면 성공적인 데이터를 반환합니다.
문제가 발생하면 Reject(error)는 .catch()로 처리할 수 있는 오류를 발생시킵니다.

약속 체이닝이란 무엇입니까?

Promise Chaining은 Promise를 사용하여 일련의 비동기 작업을 차례로 실행하는 프로세스입니다. 체인의 각 .then() 메소드는 이전 메소드가 완료된 후에 실행됩니다.

약속 체이닝을 사용하는 이유는 무엇입니까?

특정 순서에 따라 여러 비동기 작업을 처리하기 위한 깔끔하고 읽기 쉬운 코드를 작성할 수 있습니다. 각 .then()은 체인의 다음 .then()에 전달되는 값을 반환할 수 있으므로 작업을 단계별로 처리할 수 있습니다.

예: 여러 약속 연결

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });
로그인 후 복사

이 예에서는:

약속은 1초 후 1로 해결되는 것에서 시작됩니다.
각 후속 .then()은 이전 결과의 결과를 받아 두 배 또는 세 배로 늘린 후 다음 .then()에 전달합니다.
결과는 1, 2, 6단계로 기록됩니다.
연결 오류 처리
.catch()를 사용하여 Promise 체인의 모든 오류를 포착할 수 있습니다. .then()이 실패하면 체인이 중지되고 오류는 .catch() 블록으로 전달됩니다.

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });
로그인 후 복사

약속의 주요 이점

  • 콜백 지옥 방지: 약속은 여러 비동기 작업 관리를 단순화합니다. 그렇지 않으면 콜백이 깊게 중첩될 수 있습니다(콜백 지옥이라고도 함).
  • 오류 처리: 끝에 단일 .catch()를 사용하여 체인의 모든 오류를 처리할 수 있습니다.
  • 순차 실행: 약속 체이닝을 사용하면 비동기 작업이 순서대로 실행되어 코드를 더 쉽게 추론할 수 있습니다.

결론

Promise는 비동기 작업을 처리하기 위한 JavaScript의 강력한 도구입니다. Promise Chaining을 사용하면 깔끔하고 읽기 쉽고 순차적인 방식으로 여러 비동기 작업을 관리할 수 있습니다. Promise를 생성하고 사용하는 방법을 이해하고 이를 함께 연결하면 JavaScript의 비동기 프로그래밍을 마스터할 수 있습니다!

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

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