[240730] TIL

딥다이브 44장

• 44장 promise 읽고 노션에 정리함
• 콜백헬을 해결하기 위해서 나옴
• 에러처리도 어려움

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

• 프로미스의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출된다.
• 후속 처리 메서드의 콜백함수에 프로미스의 처리 결과가 인수로 전달
• 모든 후속 처리는 promise 반환
• then, catch, finally 제공

1. Promise.prototype.then

• 2개의 콜백함수를 인수로 전달 받음
• 첫 번째 콜백 함수는 프로미스가 fulfilled 상태가 되면 호출
• 두 번째 콜백 함수는 프로미스가 rejected 상태가 되면 호출
• promise 반환

// fulfilled
new Promise((resolve) => resolve("fulfilled")).then(
  (v) => console.log(v),
  (e) => console.error(e)
); // fulfilled

// rejected
new Promise((_, reject) => reject(new Error("rejected"))).then(
  (v) => console.log(v),
  (e) => console.error(e)
); // Error: rejected

• then 메서드는 언제나 프로미스 반환
  • then 메서드의 콜백 함수가 프로미스를 반환하면 그 프로미스 그대로 반환
  • 프로미스가 아닌 값을 반환하면 암묵적으로 resolve 또는 reject 하여 프로미스를 생성하여 반환

2. Promise.prototype.catch

• rejected 상태인 경우 호출
• 한 개의 콜백 함수 인수로 전달
• promise 반환

// rejected
new Promise((_, reject) => reject(new Error("rejected"))).catch((e) =>
  console.log(e)
); // Error : rejected

3. Promise.prototype.finally

• 성공, 실패 상관 없이 무조건 한 번 호출
• promise 반환

new Promise(() => {}).finally(() => console.log("finally")); // finally

프로미스의 에러 처리

• 에러 처리는 then 메서드에서 하지말고 catch 메서드에서 하는 것을 권장

프로미스 체이닝

• then, catch, finally 후속 처리 메서드는 콜백 함수가 반환한 프로미스를 반환한다. 연속적으로 호출할 수 있고, 이를 프로미스 체이닝이라 함
• 후속처리 메서드의 콜백 함수가 프로미스가 아닌 값을 반환하더라도 암묵적으로 resolve 또는 reject 하여 프로미스를 생성해 반환한다.
• 프로미스 체이닝을 통해 비동기 처리 결과를 전달받아 후속 처리 하므로, 콜백헬이 발생하지 않지만, 콜백 패턴을 사용하는데 가독성이 좋지 않다.

→ ES8에서 도입된 async/await 를 통해 해결 가능

프로미스의 정적 메서드

1. Promise.resolve / Promise.reject

• 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용

const resolvedPromise = Promise.resolve([1, 2, 3]);
resolvedPromise.then(console.log); // [1,2,3]

// 아래와 동일
const resolvedPromise = new Promise((resolve) => resolve([1, 2, 3]));
resolvedPromise.then(console.log); // [1,2,3]

2. Promise.all

• 여러 개의 비동기 처리를 모두 병렬 처리할때 사용
• 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달 받음
• 전달받은 모든 프로미스가 모두 fullfilled 상태가 되면 모든 처리 결과를 배열에 저장해 새로운 프로미스 반환
• 하나라도 rejected 상태가 되면 나머지 프로미스가 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료 (then 실행 안함)

const requestData1 = () =>
  new Promise((resolve) => setTimeout(() => resolve(1), 3000));
const requestData2 = () =>
  new Promise((resolve) => setTimeout(() => resolve(2), 2000));
const requestData3 = () =>
  new Promise((resolve) => setTimeout(() => resolve(3), 1000));

Promise.all([requestData1(), requestData2(), requestData3()])
  .then(console.log) // [ 1,2,3 ] => 약 3초 소요
  .catch(console.error);

3. Promise.race

• Promise.all 처럼 모든 프로미스가 fulfilled 상태가 되는 것을 기다리지 않고, 가장 먼저 fulfilled 상태가 된 프로미스의 결과 처리를 resolve 함

4. Promise.allSettled

• 전달 받은 프로미스가 모두 settled 상태 (수행된 상태)가 되면 처리 결과를 배열로 반환한다.

const requestData1 = () =>
  new Promise((resolve) => setTimeout(() => resolve(1), 3000));
const requestData2 = () =>
  new Promise((resolve) => setTimeout(() => resolve(2), 2000));
const requestData3 = () =>
  new Promise((resolve, reject) =>
    setTimeout(() => reject(new Error("Failed")), 1000)
  );

Promise.allSettled([requestData1(), requestData2(), requestData3()])
  .then((results) => console.log(results))
  .catch(console.error); // 이 부분은 실행되지 않습니다.

// 출력 결과
[
  { status: "fulfilled", value: 1 },
  { status: "fulfilled", value: 2 },
  { status: "rejected", reason: Error: Failed }
]

마이크로태스크 큐

console.log("script start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve()
  .then(() => {
    console.log("promise1");
  })
  .then(() => {
    console.log("promise2");
  });

console.log("script end");

// 결과
script start
script end
promise1
promise2
setTimeout

• 프로미스 후속 처리 메서드의 콜백 함수는 태스크 큐가 아니라 마이크로태스크 큐에 저장된다.
• 마이크로태스크 큐 / 태스크 큐 → 별도
• 마이크로태스크 큐는 태크스 큐보다 우선순위가 높다
• 이벤트 루프는 콜 스택이 비면 마이크로태스크 큐에서 대기하고 있는 함수 먼저 가져오고, 마이크로태스크 큐가 비면 태스크 큐 함수 가져옴

fetch

• XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
• XMLHttpRequest 보다 간단하고 프로미스 지원
• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환

const wrongUrl = "https://wrongUrl";

fetch(wrongUrl)
  .then((response) => {
    if (!response.ok) throw new Error(response.statusText);
    return response.json();
  })
  .then((todo) => console.log(todo))
  .catch((err) => console.error(err));

• fetch 는 HTTP 에러 reject 안함
• axios 는 모든 HTTP 에러 reject 프로미스 반환하고 fetch 보다 다양한 기능 지원함