티스토리 뷰

WEB/자바스크립트

[JS] Promise

춘햄 2024. 1. 8. 08:09

 Promise는 JavaScript에서 비동기 작업을 표현하고 다루는 데 사용되는 객체이다. 이는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타낸다. Promise 객체는 세 가지 상태 중 하나를 가진다.

 

  • 대기(pending): 초기 상태, 이행 또는 거부되지 않음.
  • 이행(fulfilled): 연산이 성공적으로 완료됨.
  • 거부(rejected): 연산이 실패함.

Promise는 then, catch, finally 메소드를 제공하여, 이행 또는 거부 상태가 되었을 때 실행할 콜백 함수들을 연결할 수 있다.

 

비동기로 1 + 1을 계산하는 예제 코드와 함께 확인해보자.

// 1 + 1을 수행하는 비동기 함수
const asyncAddition = new Promise((resolve, reject) => {
  setTimeout(() => {
    const result = 1 + 1;
    resolve(result); // 1 + 1의 결과를 resolve 함수를 통해 반환
  }, 1000); // 1초 후에 실행
});

// Promise를 사용하여 결과 처리
asyncAddition
  .then((sum) => {
    // Promise가 이행됐을 때 실행될 코드
    console.log(`결과: ${sum}`); // 결과: 2
  })
  .catch((error) => {
    // Promise가 거부됐을 때 실행될 코드
    console.error(`오류: ${error}`);
  })
  .finally(() => {
    // Promise의 결과와 상관없이 항상 실행될 코드
    console.log('비동기 연산이 완료되었습니다.');
  });

 

then 메소드는 Promise가 이행되었을 때 실행되며, catch 메소드는 거부되었을 때 실행된다. finally 메소드는 Promise의 결과에 상관없이 항상 실행된다.

 

Promise는 비동기 작업을 처리할 때 콜백 함수의 사용을 줄이고, 코드의 가독성을 높이며, 비동기 로직을 더 쉽게 구성할 수 있게 해준다.

 
 
끝!
 
반응형

'WEB > 자바스크립트' 카테고리의 다른 글

[JS] Array.reduce  (0) 2024.02.09
[JS] async와 await  (0) 2024.01.08
[js] 비구조화 할당  (1) 2024.01.06
[Javascript] onkeydown 속성을 이용한 예제  (0) 2021.05.14
[Javascript] 페이지 변경 <replace>  (0) 2021.05.14
Comments