[10주차 스터디]45장-프로미스

프로미스

비동기 처리를 위한 콜백 패턴의 단점

• 함수 내부에 비동기로 동작하는 코드를 포함하는 함수를 비동기 함수라고 함
• 비동기 함수 내부에 비동기로 동작하는 코드가 있는 경우? -> 비동기 함수가 종료된 이후에 완료됨
• 즉, 비동기 함수 처리 결과를 외부로 반환하거나 상위 스코프 변수에 할당하면 기대한 대로 동작되지 않음

// GET 요청을 위한 비동기 함수
const get = url => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // ① 서버의 응답을 반환한다.
      return JSON.parse(xhr.response);
    }
    console.error(`${xhr.status} ${xhr.statusText}`);
  };
};

// ② id가 1인 post를 취득
const response = get('https://jsonplaceholder.typicode.com/posts/1');
console.log(response); // undefined

• onload 이벤트 핸들러가 비동기로 동작 하기 때문
• 이벤트 핸들러는 이벤트가 발생하면 태스크 큐에 저장되어 대기하다, 콜 스택이 비면 이벤트 루프에 의해 콜 스택으로 푸시 되어 실행 되기 때문
• 정리 : 비동기 함수는 비동기 처리 결과를 외부에 반환 하거나 상위 스코프의 변수에 할당 할 수 없다.
• 따라서, 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 함 (콜백 헬 발생)
• 콜백 헬의 경우 가독성을 물론 에러처리도 곤란해짐, 이를 극복 하기 위해 ES6 부터 프로미스(Promise)가 도입 됨

프로미스의 생성

• Promise 생성자 함수를 new 연산자와 함께 호출 하면 프로미스 객체를 생성
• Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 받고, 이 콜백 함수는 resolve 와 reject 함수를 인수로 전달 받는다.

const promise = new Promise((resolve, reject)=>{
    // Promise 콜백 함수 내부에서 비동기 처리 수행
    if(/* 비동기 처리 성공 */){
        resolve('result');
    } else {
        reject('failure reason');
    }
});

• 비동기 처리 성공 시 resolve함수 호출, 실패시 reject 함수 호출

// GET 요청을 위한 비동기 함수
const promiseGet = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();

    xhr.onload = () => {
      if (xhr.status === 200) {
        // 성공적으로 응답을 전달받으면 resolve 함수를 호출한다.
        resolve(JSON.parse(xhr.response));
      } else {
        // 에러 처리를 위해 reject 함수를 호출한다.
        reject(new Error(xhr.status));
      }
    };
  });
};

// promiseGet 함수는 프로미스를 반환한다.
promiseGet('https://jsonplaceholder.typicode.com/posts/1');

• resolve 함수에 비동기 처리 결과를 인수로 전달
• 비동기 처리가 실패하면 reject 함수에 에러를 전달
• Promise는 현재 비동기 처리가 어떻게 진행 되고 있는지 나타내는 상태 정보를 가짐

프로미스의 상태 정보	의미	상태 변경 조건
pending	비동기 처리가 아직 수행되지 않은 상태	프로미스가 생성된 직후 기본 상태
fulfilled	비동기 처리가 수행된 상태(성공)	resolve 함수 호출
rejected	비동기 처리가 수행된 상태(실패)	reject 함수 호출

• 생성된 직후의 프로미스는 기본적으로 pending 상태
• 비동기 처리가 수행되면 프로미스의 상태가 변경 됨비동기 처리 성공 : resolve 함수를 호출 해 fulfilled 상태로 변경
  비동기 처리 실패 : reject 함수를 호출 해 rejected 상태로 변경
  fulfilled 또는 rejected 상태를 settled 상태라고 부름

정리 : 프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체

프로미스의 후속 처리 메서드

• 프로미스의 비동기 처리 상태가 변화 하면 이에 따른 후속 처리 필요
• 프로미스는 후속 메서드 then, catch, finally 제공

Promise.prototype.then

• then 메서드는 두 개의 콜백 함수를 인수로 전달 받는다.
• 첫 번째 콜백은 fulfilled 상태 되면(resolve 함수 호출된 상태) 호출, 이때 비동기 처리 결과를 인수로 전달 받음
• 두 번째 콜백은 rejected 상태가 되면 호출, 이때 에러를 인수로 전달 받음
• then 메서드는 언제나 프로미스를 반환
• 만약 then 메서드의 콜백 함수가 프로미스를 반환하면 그 프로미스 그대로 반환, 콜백 함수가 프로미스가 아닌 값을 반환 하면 암묵적으로 resolve 또는 reject 하여 반환

Promise.prototype.catch

• catch 메서드는 한 개의 콜백 함수를 인수로 전달 받음
• catch 의 콜백 함수는 rejected일 때만 호출 됨
• 동작 방식은 then 과 동일

Promise.prototype.finally

• 프로미스의 성공, 실패와 상관 없이 무조건 한 번 호출 되는 함수

프로미스의 에러 처리

• then의 두 번째 콜백 함수로 에러를 처리 가능
• catch 메서드 활용 해서 에러 처리 가능
• catch 메서드는 내부적으로 then(undefined, onRejected) 호출then의 첫 번째 콜백에서 발생한 에러는 두번째 콜백에서 처리 불가능
  따라서 에러처리는 catch로 하는 것을 권장

promiseGet(url)
    .then(res => consoloe.log(res))
    .then(undefined, err => console.error(err));

// 위 함수와 같은 함수
promiseGet(url)
    .then(res => consoloe.log(res))
    .catch(err => console.error(err));

프로미스 체이닝

• 프로미스 후속 처리 메서드는 언제나 프로미스를 반환하므로 연속적으로 호출 가능
• 이를 프로미스 체이닝 이라 한다.

const url = 'https://jsonplaceholder.typicode.com';

// id가 1인 post의 userId를 취득
promiseGet(`${url}/posts/1`)
  // 취득한 post의 userId로 user 정보를 취득
  .then(({ userId }) => promiseGet(`${url}/users/${userId}`))
  .then(userInfo => console.log(userInfo))
  .catch(err => console.error(err));

프로미스의 정적 메서드

Promise.all

• Promise.all 은 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용된다.
• 비동기 처리 함수의 실행 순서가 상관 없는 경우 Promise.all 메서드로 병렬 처리 하는 것이 효율적일 수 있다.
• Promise.all 메서드는 배열 등의 이터러블을 인수로 전달 받는다.
• 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되면 종료한다.
• Promise.all 메서드는 인수로 전달 받은 이터러블의 요소가 프로미스가 아닌 경우 Promise.resolve로 래핑

const request1 = () => new Promise(resolve => setTimeout(() => resolve(1), 3000));
const request2 = () => new Promise(resolve => setTimeout(() => resolve(2), 2000));
const request3 = () => new Promise(resolve => setTimeout(() => resolve(3), 1000));

Promise.all([request1(), request2(), request3()])
  .then(console.log)  // [1,2,3]
  .catch(console.err);

• 인수로 받은 이터러블이 모두 fulfilled 될 때 까지 기다렸다가 첫 번째 프로미스 부터 차례대로 배열에 저장해 그 배열을 resolve 해서 새로운 프로미스를 반환
• 즉, 처리 순서가 보장 됨

Promise.race

• Promise.all 메서드와 동일 하게 동작 하지만 가장 먼저 fulfilled 되는 프로미스의 처리 결과를 반환

Promise.allSettled

• Promise.allSettled 메서드는 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받음.
• 전달받은 프로미스가 모두 settled 상태(비동기 처리가 수행된 상태)가 되면 처리 결과를 배열로 반환.

Promise.allSettled([
  new Promise(resolve => setTimeout(() => resolve(1), 2000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('Error!')), 1000))
]).then(console.log);
/*
[
  {status: "fulfilled", value: 1},
  {status: "rejected", reason: Error: Error! at <anonymous>:3:54}
]
*/

• Promise.all과 달리 fulfilled, rejected 상태와 상관 없이 인수로 전달 받은 모든 프로미스들의 결괏값이 모두 담겨 있음
• Promise.allSettled의 결과 객체
  • 프로미스가 fulfilled인 경우: 비동기 처리 상태를 나타내는 status 프로퍼티와 처리 결과를 나타내는 value 프로퍼티를 가짐.
  • 프로미스가 rejected인 경우: 비동기 처리 상태를 나타내는 status 프로퍼티와 에러를 나타내는 reason 프로퍼티를 가짐.

마이크로 태스크 큐

• 비동기 함수의 콜백 함수나 이벤트 핸들러는 태스크 큐에 일시 저장됩니다.
• 프로미스의 후속 처리 메서드의 콜백 함수는 태스크 큐가 아니라 마이크로 태스크 큐에서 저장
• 마이크로 태스크 큐는 태스크 큐와 동일한 원리로 동작 하지만, 태스크 큐 보다 우선순위가 높습니다.

fetch

• fetch 함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 Web API이다.
• 사용법이 간단하고 프로미스를 지원하기 때문에 콜백 패턴의 단점을 보완 가능

const promise = fetch(url [, options])

• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환
• 즉, 프로미스를 반환하기 때문에 후속 처리메서드 (then, catch) 사용 가능
• then을 통해 resolve한 Response 객체는 HTTP 응답을 나타내는 다양한 프로퍼티를 제공예를 들어 Response.prototype.json 메서드는 HTTP 응답 몸체를 취득화 하여 역직렬화 한다.