Promise 객체

Promise 객체

• 비동기 작업을 처리하기 위한 객체
• 비동기 작업이 완료되면 값을 알려줄 것을 '약속'함
• 일단 Promise 를 돌려주고 나중에 작업이 완료되면 결과값을 Promise 에 채워 넣어줌

 

Promise 객체의 3가지 상태

 

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

2. Fulfilled (이행): 작업이 성공적으로 완료된 상태

3. Rejected (거부): 작업을 실패한 상태

 

Promise 객체의 상태는 상태 전이(Transition) 을 통해 변경된다. 

 

 

then 메소드

• Promise 객체가 fulfilled 상태가 되었을 때 호출
• 등록한 콜백함수의 반환값으로 다시 Promise 객체를 반환

 

catch 메소드

• Promise 객체가 rejected 상태가 되었을 때 호출
• 등록한 콜백함수의 반환값으로 다시 Promise 객체를 반환

 

※ 참고

사실 then / catch 메소드 둘 다 Promise 객체 외에 기본 자료형 또는 객체인 반환값을 리턴할 수도 있다. 하지만 결국 이 값은 Promise.resolve 로 래핑되어 새로운 Promise 객체가 만들어지기 때문에 항상 Promise 객체가 리턴되는 것과 같다. 

 

 

- GET

// GET 요청

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data); // 요청 성공 시 데이터 출력
  })
  .catch(error => {
    console.error('Error:', error); // 요청 실패 시 에러 출력
  });

 

1. axios.get 함수 호출 시 즉시 'Promise' 객체가 반환됨, 반환된 Promise 객체는 pending 상태

2. Promise 객체가 fulfilled 상태가 되면 'then' 메소드가 실행됨

3. Promise 객체가 'rejected' 상태가 되면 'catch' 메소드가 실행됨

 

- POST

{
"userId": 1,
"id": 1,
"title":"delectus aut autem",
"completed": false
}

// POST 요청

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(response => {
    console.log(response.data); // 요청 성공 시 데이터 출력
  })
  .catch(error => {
    console.error('Error:', error); // 요청 실패 시 에러 출력
  });

 

1. axios.post 호출 시 즉시 'Promise' 객체가 반환됨, 반환된 Promise 객체는 pending 상태

2. 서버가 요청을 성공적으로 처리하면 Promise 객체는 fulfilled 상태가 되고 .then 메소드가 실행됨

3. 요청이 실패하면 Promise 객체는 rejected 상태가 되고 catch 메소드가 실행됨

 

 

 

Promise Chaining

 

하나의 프로미스가 완료된 후 다음 작업을 수행하기 위해 연속적으로 여러 프로미스를 연결하는 기법으로 비동기 작업을 순차적으로 처리하고 각 작업의 결과를 다음 작업에 전달한다.

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(response => {
    console.log('첫 번째 then: 응답 데이터:', response.data);
    // 응답 데이터 처리 또는 추가 작업 수행
    return response.data.id; // 다음 then으로 새로 생성된 포스트 ID 전달
  })
  .then(postId => {
    // 두 번째 then: 새로 생성된 포스트 ID를 사용한 추가 작업
    console.log('두 번째 then: 새로 생성된 포스트 ID:', postId);
    return axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);
  })
  .then(postResponse => {
    // 세 번째 then: 새로 생성된 포스트 정보 출력
    console.log('세 번째 then: 포스트 정보:', postResponse.data);
  })
  .catch(error => {
    console.error('에러 발생:', error); // 에러 발생 시 에러 출력
  });