Promise

Promise는 자바스크립트에서 비동기를 처리하기 위한 객체이다. Promise는 어떤 작업이 완료되었을 때 그 결과를 처리하는 방법을 제공한다. Promise는 3가지 상태를 가질 수 있다.

 

1. Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태

2. Fulfilled(이행): 비동기 처리가 성공적으로 완료된 상태

3. Rejected(거부): 비동기 처리가 실패하거나 오류가 발생한 상태

 

예를 들어서,  pending이라는 것은 친구의 생일이 오지 않아서 선물을 주지 않은 상태를 의미하고, Fulfilled는 친구의 생일날 선물을 준다. 이것이 약속을 지킨 것이다. Rejected는 어떤 이유로든 선물을 줄 수 없다. 이것이 약속을 어긴 것이다. 

 

let promise = new Promise(function(resolve, reject) {
    
    if (비동기 작업이 성공적으로 됐을때) {
       resolve("성공");
    } else {
       reject(Error("실패"));
    }
   

});


promise
   .then(function(result) {
     // 성공
     console.log(result);
   })
     // 실패
   .catch(function(error) {
     console.error(error);
   });

비동기 작업이 성공하면 resolve 함수를, 오류가 발생하면 reject 함수를 호출한다. 

 

* fetch vs axios

 

fetch는 요청이 실패해도 네트워크 에러가 발생하지 않는 한 Promise를 reject하지 않는다. HTTP 상태 코드가 404나 500 등의 오류 코드라도 fetch는 오류 상황이 아닌 성공적으로 응답을 받았다고 판단하고 Promise를 resolve한다. 반면, axios는 HTTP 상태 코드가 200 범위가 아니라면 Promise를 reject하여 오류 처리를 보다 직관적으로 한다. fetch는 네트워크 요청의 성공 여부에만 초점을 맞추는 관대한 방식인데, axios는 HTTP 응답 상태 코드를 보다 엄격하게 처리하는 방식이다. 

결론은 그래서 fetch는 간단한 HTTP 요청을 보낼 때 사용하자. 근데 HTTP 상태 코드를 직접 확인하고 처리해야한다. 반면에 axios는 복잡한 HTTP 요청을 처리해야 하거나, 요청 취소, HTTP 요청 중단, 요청과 응답 데이터 변형 등과 같은 고급 기능이 필요하면 axios를 사용하자.