[Promise] 비동기 작업을 유연하게

Promise

- 자바스크립트에서 비동기 작업의 결과를 관리하고 처리하기 위한 객체

- 특정 작업이 완료되었을 때, 그 결과를 가지고 다른 작업을 수행할 수 있도록 해주는 일종의 약속

​

Promise가 필요한 이유

- 비동기 작업의 간편한 처리

- 콜백 지옥 방지

- 에러 처리

​

Promise의 상태

- Pending: 아직 결과가 결정되지 않은 상태

- Fulfilled: 작업이 성공적으로 완료된 상태

- Rejected: 작업이 실패한 상태

​

Promise 생성하기

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    // 작업 성공 시
    resolve('작업 완료!');
  }, 1000);

  // 작업 실패 시
  // reject(new Error('오류 발생'));
});

resolve 함수: 작업이 성공적으로 완료되었을 때 호출

reject 함수: 작업이 실패했을 때 호출

​

Promise 사용하기

myPromise
  .then(result => {
    console.log(result); // '작업 완료!' 출력
  })
  .catch(error => {
    console.error(error);
  });

.then() 메서드: Promise가 Fulfilled 상태가 되었을 때 실행될 함수를 전달

.catch() 메서드: Promise가 Rejected 상태가 되었을 때 실행될 함수를 전달

​

Promise 체이닝

Promise는 .then() 메서드를 연속적으로 연결하여 체이닝 가능

이를 통해 비동기 작업을 순차적으로 실행 가능

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    console.error(error);
  });

 

async/await

ES8부터 도입된 async/await 키워드를 사용하면 Promise를 더욱 간결하게 사용 가능

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 데이터 처리
  } catch ( 1 error) {
    console.error(error);
  }
}