프로그래밍 「 자바스크립트 편」JavaScript에서 Promise 탐색: Typicode API를 사용한 실제 예제

Promise는 비동기 작업을 처리하고 비동기 코드 관리를 단순화할 수 있는 JavaScript의 강력한 기능입니다. 이 기사에서는 약속의 개념을 탐구하고 실제 사례를 통해 실제 사용을 보여줍니다. 무료 Typicode API에서 데이터를 검색하는 함수와 함께 promise를 사용하는 방법을 살펴보겠습니다. 뛰어 들자!fetch()

님이 촬영 한 사진 데바브라타 하즈라 on Unsplash

약속 이해하기:

Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 개체입니다. 성공 및 오류 처리 논리를 분리하여 비동기 코드를 처리하는 명확하고 구조화된 방법을 제공합니다. 약속에는 보류 중, 이행 및 거부됨의 세 가지 상태가 있습니다.

Typicode API와 함께 Promises 사용:

promise의 사용법을 보여주기 위해 함수를 사용하여 Typicode API에서 데이터를 가져오고 promise를 반환하는 함수를 구현해 보겠습니다.fetch()

자바스크립트 구현:

function getDataFromAPI() {
  return new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('Error retrieving data from API');
        }
      })
      .then(data => {
        resolve(data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

// Usage
getDataFromAPI()
  .then(data => {
    console.log(data); // Process the retrieved data
  })
  .catch(error => {
    console.error(error); // Handle any errors that occurred
  });

코드 흐름에 대한 설명:

1. promise를 반환하는 함수를 정의합니다.getDataFromAPI()
2. 약속 내에서 이 함수를 사용하여 Typicode API에 대한 GET 요청을 수행합니다.fetch()
3. 응답이 성공하면(상태 코드 200) 데이터를 검색하는 데 사용하여 응답을 구문 분석합니다..json()
4. 응답에 오류가 있는 경우 catch 블록을 트리거하는 데 using을 사용하여 오류를 발생시킵니다.throw new Error()
5. 마지막으로, 를 사용하여 검색된 데이터로 약속을 해결하거나 using 오류로 약속을 거부합니다.resolve(data)reject(error)

실제 응용 분야에서의 실제 사용 사례:

Promise는 JavaScript에서 API 요청, 데이터베이스 읽기/쓰기 또는 파일 I/O 수행과 같은 비동기 작업을 처리하는 데 널리 사용됩니다. 비동기 코드 관리에 대한 구조화된 접근 방식을 제공하고 더 나은 오류 처리 및 코드 구성을 허용합니다.

실제 응용 프로그램에서 약속은 다른 작업의 완료에 의존하는 비동기 작업을 처리해야 하는 시나리오에 필수적입니다. 예를 들어, 여러 API에서 데이터를 가져오고 검색된 데이터를 사용자에게 표시하기 전에 처리해야 하는 웹 애플리케이션을 빌드할 때 Promises는 데이터 검색 흐름을 관리하고 필요한 작업이 올바른 순서로 실행되도록 하는 데 도움이 됩니다.

요약:

Promise는 비동기 작업을 처리하고 복잡한 비동기 코드를 관리하기 위한 JavaScript의 강력한 도구입니다. promise를 사용하면 오류 처리를 간소화하고, 코드 가독성을 개선하고, 비동기 작업의 실행을 간소화할 수 있습니다. 이 기사에서는 promise의 개념을 살펴보고 Typicode API에서 데이터를 가져오는 실제 예제를 통해 promise의 실제 사용을 시연했습니다. 약속을 마스터하면 비동기 작업을 처리하고 보다 효율적이고 안정적인 JavaScript 애플리케이션을 빌드할 수 있는 더 나은 장비를 갖추게 됩니다. 즐거운 코딩 되세요!

적절한 종속성이 있는 최신 웹 브라우저 또는 Node.js와 같이 Fetch API를 지원하는 환경에서 이 코드를 실행해야 합니다.