Promise

콜백의 한계점이라는 직전 포스팅에서 사용했던 코드는 

// 직원 데이터를 가져온 후 리스폰스를 파싱하고 데이터를 프로세싱 하는 예시
getEmployees((response) => {
  json(response, (data) => {
    groupEmployees(data, (result) => {
      console.log(result);
    });
  });
});

위 코드였다. getEmployees라는 함수를 이용해 웹 리퀘스트를 보내는 것을 흉내 냈었는데, 실제로 웹 리퀘스트를 보낼 때는 fetch() 라는 함수를 많이 사용한다. (fetch 함수는 promise 객체를 리턴)

const response = fetch('https://learn.codeit.kr/api/employees');

console.log(response);

위 URL은 직원 10명의 데이터가 있는 창이다. fetch는 코드로 리퀘스트(웹 브라우저가 서버에 요청)를 보내서 이 데이터를 받아오는 것이다.

URL로 접속해보면 나오는 화면

실행해보면 이렇게 나오는데

드래그 되어 있는 부분은 주의 메세지여서 무시해도 된다.

출력결과는 Promise { <pending> } 이 부분이다. fetch 함수가 Promise 라는걸 리턴해서 그 값이 리스폰스(서버가 보내주는 응답)에 저장된 것이다. 그렇다면 Promise는 무엇일까?

Promise는 비동기 작업이 완료되면 값을 알려 주는 객체로 작업이 완료되면 값을 알려줄 것을 "약속"하기 때문에 promise이다.

fetch는 오래 걸리는 작업이기 때문에 결과 값을 바로 돌려줄 수 없으니까 일단 promise를 돌려주고 나중에 작업이 완료되면 결과 값을 promise에 채워 넣어 주겠다는 개념이다. 이렇게 promise를 바로 리턴하면 좀 더 직관적인 코드를 작성할 수 있다.

리퀘스트(웹 브라우저가 서버에 요청)를 보내고 리스폰스(서버가 보내주는 응답)를 파싱(어떤 큰 자료에서 원하는 정보만 가공하고 뽑아서 원할 때 불러올 수 있게 하는것)해서 결과를 출력하는 코드를 전에는 왼쪽(콜백기반) 처럼 했지만 promise 기반 fetch 코드를 완성하면 오른쪽의 모습이다.

promise 기반 코드는 평소에 쓰는 코드와 비슷한 모습인데, 코드가 한줄씩 있고 이전 줄에서 선언한 변수를 다음줄에서 사용하고 있다. 비동기 작업을 처리할 때도 익숙한 형태로 코드를 작성할 수 있다는게 promise 문법의 큰 장점이다. (자바스크립트에서 많은 비동기 코드가 prmise를 활용하는 이유이기도 함)

Promise는 세 가지 중 하나의 상태를 가질 수 있는데

• Pending: 비동기 작업이 끝나기를 기다릴 때
• Fulfilled: 비동기 작업이 성공적으로 끝났을 때. 비동기 작업의 성공 결과를 결괏값으로 갖게 됨.
• Rejected: 비동기 작업이 실패했을 때. 비동기 작업에서 발생한 오류를 결괏값으로 갖게 됨.

그리고 Promise 객체를 통해 비동기 작업의 결과를 가져오거나 오류를 적절히 처리할 수 있다. Promise 객체를 다루는 방법은 두 가지가 있는데

1. .then() 메소드 + 콜백

2. async 와 await 문법

이다. 처음 배울 때는 async 와 await이 조금 더 직관적이고 이해하기 쉽다.