JavaScript 및 React Native의 약속: 생성, 사용 및 일반 시나리오-JS 튜토리얼-php.cn

Promises in JavaScript and React Native: Creation, Usage, and Common Scenarios

비동기 작업 처리는 JavaScript에서 필수적이며, 특히 데이터 가져오기, 애니메이션 및 사용자 상호 작용이 원활하게 작동해야 하는 React Native와 같은 환경에서는 더욱 그렇습니다. Promise는 비동기 작업을 관리하는 강력한 방법을 제공하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. 이 블로그에서는 React Native와 관련된 실제 예제와 함께 JavaScript에서 Promise를 생성하고 사용하는 방법을 다룹니다.

약속이란 무엇입니까?

JavaScript의 Promise는 비동기 작업의 최종 완료(또는 실패)를 나타내는 개체입니다. 이를 통해 고전적인 "콜백 지옥"을 피하면서 보다 동기적인 방식으로 비동기 코드를 처리할 수 있습니다. 약속에는 세 가지 상태가 있습니다:

보류 중: 이행도 거부도 아닌 초기 상태입니다.
완료: 작업이 성공적으로 완료되었습니다.
거부됨: 작업이 실패했습니다.

약속 만들기

Promise를 생성하려면 두 개의 매개변수가 있는 단일 함수(실행자 함수)를 사용하는 Promise 생성자를 사용합니다.

해결: 작업이 성공적으로 완료되면 약속을 이행하기 위해 이 함수를 호출합니다.
거절: 오류가 발생할 경우 약속을 거부하려면 이 함수를 호출하세요.

예: 기본 약속 만들기

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

로그인 후 복사

이 예에서는:

setTimeout을 사용하여 데이터 가져오기를 시뮬레이션하는 Promise를 생성합니다.
성공 변수가 true이면 일부 데이터를 사용하여 해결()을 호출합니다. 그렇지 않으면 오류 메시지와 함께 거부()를 호출합니다.

.then(), .catch() 및 .finally()와 함께 Promise 사용

Promise가 생성되면 다음을 사용하여 결과를 처리할 수 있습니다.

.then()을 사용하여 성공적인 해결을 처리합니다.
.catch()는 오류를 처리하고
.finally()는 결과에 관계없이 약속이 확정된 후 코드를 실행합니다.

예: 약속 처리하기

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

로그인 후 복사

이 예에서는:

Promise가 해결되면 .then()이 호출되어 데이터를 인쇄합니다.
.catch()는 약속이 거부될 경우 발생하는 모든 오류를 처리합니다.
.finally()는 Promise의 해결 또는 거부 여부에 관계없이 실행됩니다.

React Native의 Promise에 대한 실제 사용 사례

1. API에서 데이터 가져오기

React Native에서 데이터 가져오기는 Promise를 사용하여 효율적으로 관리할 수 있는 일반적인 비동기 작업입니다.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

로그인 후 복사

사용 사례: 성공적인 응답과 오류를 모두 처리해야 하는 REST API 또는 기타 네트워크 요청에서 데이터를 가져옵니다.

2. 순차적 비동기 작업에 대한 약속 사용

가끔 하나의 비동기 작업이 다른 비동기 작업에 종속되는 경우가 있습니다. Promise를 사용하면 작업을 순차적으로 쉽게 연결할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

로그인 후 복사

사용 사례: 사용자를 로그인한 후 사용자의 신원을 기반으로 프로필 데이터를 가져오는 데 유용합니다.

3. Promise.all()로 여러 약속 처리하기

병렬로 실행할 수 있는 독립적인 Promise가 여러 개 있는 경우 Promise.all()을 사용하면 모든 Promise가 해결되거나 그중 하나가 거부될 때까지 기다릴 수 있습니다.

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

로그인 후 복사

사용 사례: 별도의 API 엔드포인트에서 게시물과 댓글을 가져오는 등 여러 리소스를 동시에 가져옵니다.

4. Promise.race()를 사용한 약속 경주

Promise.race()를 사용하면 해결(해결 또는 거부)되는 첫 번째 Promise가 결과를 결정합니다. 이는 장기 실행 작업에 대한 시간 초과를 설정하려는 경우에 유용합니다.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

로그인 후 복사

사용 사례: 네트워크 요청에 대한 시간 제한을 설정하여 서버가 느리거나 응답하지 않는 경우 무기한 중단되지 않도록 합니다.

5. Promise.allSettled()를 사용하여 혼합된 결과 처리

Promise.allSettled()는 해결 여부에 관계없이 모든 Promise가 해결되기를 기다립니다. 일부가 실패하더라도 모든 Promise의 결과가 필요할 때 유용합니다.

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

로그인 후 복사

사용 사례: 선택적 데이터 소스를 가져오거나 여러 API를 호출하는 등 일부 요청이 실패할 수 있는 여러 요청을 실행할 때 유용합니다.

고급 기술: 콜백을 약속으로 변환

이전 코드베이스나 특정 라이브러리에서는 프라미스 대신 콜백을 사용할 수 있습니다. 이러한 콜백을 Promise로 래핑하여 최신 Promise 기반 함수로 변환할 수 있습니다.

예: 콜백을 Promise로 래핑하기

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

로그인 후 복사

사용 사례: 이 기술을 사용하면 약속 친화적인 방식으로 레거시 콜백 기반 코드를 사용하여 최신 async/await 구문과 호환되도록 할 수 있습니다.

요약

Promise는 JavaScript 및 React Native에서 비동기 작업을 관리하기 위한 강력한 도구입니다. 다양한 시나리오에서 Promise를 생성, 사용 및 처리하는 방법을 이해하면 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다. 일반적인 사용 사례를 간단히 요약하면 다음과 같습니다.

API 요청: 오류 처리를 통해 서버에서 데이터를 가져옵니다.
연쇄 작업: 종속 작업을 순차적으로 실행합니다.
병렬 작업: Promise.all()을 사용하여 여러 Promise를 동시에 실행합니다.
타임아웃 및 레이싱: Promise.race()를 사용하여 요청 기간을 제한합니다.
혼합된 결과: 부분적으로 실패할 수 있는 작업에 Promise.allSettled()를 사용합니다.
콜백 변환: 최신 구문과의 호환성을 위해 콜백 기반 함수를 Promise로 래핑합니다.