Javascript : Promise 객체란?

1. Promise 객체란?

어떤 작업에 관한 상태 정보를 가지고 있는 객체를 의미한다.

따라서 작업의 상태에 따라 promise 객체가 가지고 있는 정보가 달라진다.

 

1) pending 상태

작업이 진행 중인 경우 

 

2) fulfilled 상태

작업이 성공적으로 완료된 경우를 의미하며

Promise 객체는 작업 성공 결과를 갖게 됨

 

3) rejected 상태 

작업이 실패한 경우를 의미하며

Promise 객체는 작업 실패 정보를 갖게 됨

 

2. fetch 함수 다시 해석하기

 

개요

fetch 함수는 Promise 객체를 리턴한다.

fetch 함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 작업을 수행한다.

작업의 성공 여부가 fetch 함수가 리턴하는 promise 객체에 저장된다.

 

console.log('Start!');
 
fetch('<https://www.google.com>')
  .then((response) => response.text())
  .then((result) => { console.log(result); });
 
console.log('End');

 

1) then 메소드 

then은 콜백을 등록하기 위해 사용되는 Promise 객체의 메소드이다. 

 

여기서는 fetch가 리턴하는 프로미스 객체가

pending 상태에서 -> fulfilled 상태가 될 때

실행할 콜백을 등록한다. 

 

실제로 fetch가 리턴하는 프로미스 객체가

pending 상태에서 -> fulfilled 상태가 되면

promise 객체의 작업 성공 결과는 

첫 번째 콜백의 파라미터로 넘어온다. 

이 코드에서는 reponse 변수가 첫 콜백의 파라미터이다.

 

2) fetch 함수에서의 fullfilled 

리스폰스를 정상적으로 잘 받는 경우에 해당되며,

서버가 보내준 리스폰스가 작업의 성공 결과에 해당된다.

 

3) fetch 함수에서의 rejected 

fetch 함수가 리스폰스를 정상적으로 받지 못하는 경우에 해당된다.

 

3. Promise Chaining이란?

 

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
    return users[0];
  })
  .then((user) => {
    console.log(user);
    const { address } = user;
    return address;
  })

 

1) 개요

then 메소드 뒤에는 계속해서 then 메소드를 붙일 수 있는데,

이전 콜백의 리턴값을 다음 콜백이 파라미터로 받아서 사용할 수 있다.

then 메소드는 각각 새로운 promise 객체를 리턴하기 때문이다.

 

먼저, 

fetch 함수로 리스폰스를 잘 받으면,

(fetch 함수가 리턴한 promise 객체가 fulfilled 상태가 되면) 

then 메소드도 promise 객체를 리턴한다.

 

 

2) 과정

1. then 메소드가 리턴한 promise 객체는 처음에 pending 상태이다.

2. 나중에 then 메소드를 등록한 콜백이 실행되고,

콜백에서 어떤 값을 리턴하면 then 메소드가 리턴했던 프로미스 객체가 영향을 받는다.

이 때, 콜백에서 어떤 값을 리턴하냐에 따라 받는 영향이 달라진다.

 

1) 콜백이 promise 객체를 리턴하는 경우

then 메소드가 리턴한 promise 객체도 

콜백이 리턴한 promise 객체와 동일한 상태와 결과를 갖는다.

 

2) 콜백이 promise 객체가 아닌 값을 리턴하는 경우

promise 객체가 아닌,

단순 숫자나 문자열, 일반 객체 같은 것들을 리턴하면

then 메소드가 리턴한 promise 객체는 fulfilled 상태가 되고,

콜백의 리턴값을 작업 성공 결과로 갖는다.

 

 

 

3) 결론

 

fetch 함수도 promise 객체를 리턴하고, 

then 메소드도 promise 객체를 리턴한다.

 

fetch 함수는 서버로부터 리스폰스를 잘 받았을 때  promise 객체는

pending에서 fullfilled 상태로 바뀌며,

promise 객체의 작업 성공 결과는

 then 메소드로 등록한 첫 번째 콜백함수의 파라미터로 넘어온다. 

이 때 then 메소드로 등록했던 콜백함수가 순차적으로 실행된다.

 

콜백함수의 리턴값에 then 메소드가 리턴한 promise 객체가 영향을 받는다.

then 메소드가 리턴한 promise 객체는 초기에 pending 값을 갖는다.

 

이후 

콜백함수의 리턴값이 promise 객체인 경우, 

then 메소드가 리턴한 promise 객체는

콜백함수가 리턴한 promise 객체와 같은

상태(fullfilled or rejected)와 결과(작업 성공 결과 or 작업 실패 정보)를 가진다.

 

콜백함수의 리턴값이 promise 객체가 아닌 경우, 

then 메소드가 리턴한 promise 객체는 fulfilled 상태가 되고,

콜백의 리턴값을 작업 성공 결과로 갖는다.

3) promise chaining이 필요한 경우 

비동기 작업을 순차적으로 수행해야할 때,

전체 코드를 깔끔하게 나타내기 위해 사용한다.

 

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
    const { id } = users[0];
    
    fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`)
      .then((response) => response.text())
      .then((posts) => {
        console.log(posts);
      });
  });
console.log('End');

 

여기서 두 번째 fetch 함수에 return을 붙이고,

fetch문에 붙어있던 then 메소드들을 아예 바깥으로 뺄 수 있다.

 

 

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
    const { id } = users[0];
    return fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`);
  })
  .then((response) => response.text())
  .then((posts) => {
    console.log(posts);
  });

console.log('End');

 

두 번째 then 메소드는 

fetch 함수가 리턴하는 프로미스 객체를 리턴하고 있다. 

( return fetch(` https://jsonplaceholder.typicode.com/posts?userId=$ {id}`) ;

 

 

이 then 메소드가 return했던 promise 객체도

fetch 함수에서 리턴한 promise 객체와 똑같은 상태와 결과를 갖게 된다.

 

이 사진 뒤의 코드는 두 번째 fetch 함수(위 그림에서 박스쳐있는 부분)가 리턴한 

promise 객체에 then이 연결된 거라고 볼 수 있다.

 

즉, 콜백 안에서 프로미스 객체를 리턴하는 경우에 

콜백 "안"에 then 메소드를 쓸 필요가 없다.

 콜백 안에서는 프로미스 객체를 바로 리턴해버리고,

바깥에 있는 프로미스 체인에 then 메소드를 붙이면 되기 때문이다.