JS: Promise

Promise는 JavaScript에서 비동기 작업을 처리하기 위해 도입된 객체입니다. Promise는 비동기 작업의 최종 완료(또는 실패)를 나타내며, 작업의 성공적인 결과 값이나 실패 이유를 처리할 수 있습니다.

 

 

Promise의 기본 개념

 

Promise는 비동기 작업의 결과를 나타내는 객체로, 세 가지 상태를 가질 수 있습니다:

 

1. Pending: 대기 중. 초기 상태로, 비동기 작업이 아직 완료되지 않은 상태.

2. Fulfilled: 이행됨. 비동기 작업이 성공적으로 완료되어 결과 값을 반환한 상태.

3. Rejected: 거부됨. 비동기 작업이 실패하여 에러를 반환한 상태.

 

Promise 사용 방법

 

1. Promise 생성

 

Promise 객체는 new Promise 생성자를 사용하여 생성합니다. 생성자는 resolve와 reject 콜백 함수를 인자로 받는 함수입니다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true; // 예시를 위한 변수

  if (success) {
    resolve('작업 성공'); // 성공적으로 완료되면 호출
  } else {
    reject('작업 실패'); // 실패하면 호출
  }
});

 

2. Promise 사용

 

생성된 Promise 객체는 .then, .catch, .finally 메서드를 사용하여 처리할 수 있습니다.

myPromise
  .then(result => {
    console.log(result); // '작업 성공'
  })
  .catch(error => {
    console.error(error); // '작업 실패'
  })
  .finally(() => {
    console.log('작업 완료'); // 성공 또는 실패와 상관없이 실행
  });

 

Promise와 async/await

async/await는 Promise를 다루기 위한 문법적인 설탕(syntactic sugar)으로, Promise 기반의 비동기 작업을 보다 간결하고 직관적으로 작성할 수 있게 합니다.

 

async 함수

 

async 키워드는 함수를 비동기로 선언합니다. async 함수는 항상 Promise를 반환합니다.

async function myAsyncFunction() {
  return '결과 값';
}

myAsyncFunction().then(result => console.log(result)); // '결과 값'

 

await 표현식

 

await 키워드는 Promise가 처리될 때까지 기다립니다. await는 오직 async 함수 안에서만 사용할 수 있습니다.

async function fetchData() {
  try {
    const result = await myPromise; // myPromise가 이행될 때까지 기다림
    console.log(result); // '작업 성공'
  } catch (error) {
    console.error(error); // '작업 실패'
  }
}

fetchData();

 

Promise 예제: API 호출

다음은 Promise를 사용하여 API를 호출하고 응답을 처리하는 예제입니다.

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

fetchUserData(1)
  .then(user => console.log(user))
  .catch(error => console.error('Error:', error));

 

async/await을 사용한 예제

위 예제를 async/await을 사용하여 더 간결하게 작성할 수 있습니다.

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

(async () => {
  try {
    const user = await fetchUserData(1);
    console.log(user);
  } catch (error) {
    console.error(error);
  }
})();

 

요약

 

• Promise는 비동기 작업의 결과를 나타내며, Pending, Fulfilled, Rejected의 세 가지 상태를 가집니다.

• Promise는 .then, .catch, .finally 메서드를 통해 결과를 처리할 수 있습니다.

• async/await는 Promise를 다루기 위한 문법적 설탕으로, 비동기 작업을 동기식 코드처럼 작성할 수 있게 해줍니다.

 

 

 

=> 마지막 예제는 잘 이해르 ㄹ못하겠넹...