자바스크립트 비동기 처리를 위해 콜백함수를 사용한다.
하지만 콜백함수는 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하고
여러개의 비동기 처리를 한번에 처리하는 데 한계가 있다.

ES6에서는 비동기 처리를 위한 또 다른 패턴 프로미스를 도입했다.

🌱 프로미스

promise 생성자 함수는 비동기 처리를 수행할 콜백함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.

const promise = new Promise((resolve, reject) => {
  if(// 비동기 처리 성공) {
     resolve('result');
    } else {
      reject('failure reason');
  }
});

promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.

• 비동기 처리가 성공하면 => 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(JSON.parse(xhr.response));
      } else {
        // 에러 처리 
        reject(new Error(xhr.status))
      }
    }
  })
}

생성된 직후의 프로미스는 기본적으로 pending 상태다.

• 비동기 처리 성공 : resolve 함수를 호출해 프로미스를 fulfilled 상태로 변경
  (pending => resolve)
• 비동기 처리 실패 : reject 함수를 호출해 rejected 상태로 변경
  (pending => rejected | 이렇게 되면 Error 객체를 값으로 갖는다.)

프로미스 상태는 resolve, reject 함수를 호출하는 것으로 결정된다.
프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체이다.

---

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

프로미스의 비동기 처리 상태를 변화하면 이에 따른 후속처리를 해야한다.

• catch, then

new Promise((-, reject) => reject(new Error('rejected')))
  .catch(e => console.log(e)) // Error: rejected

new Promise((-, reject) => reject(new Error('rejected')))
  .then(undefined, e => console.log(e)) // Error: rejected

then 메서드에 두 번째 콜백 함수를 전달하는 것보단 catch를 사용하는것이 가독성이 좋고 명확하다
에러 처리는 catch에서 하는것을 권장 !

promiseGet('')
	.then(res => console.xxx(res))
    .catch(err => console.error(err));

---

• finally

finally 메서드는 한 개의 콜백 함수를 인수로 전달 받는다. 프로미스의 성공과 실패와 상관없이 무조건 한 번 호출된다. finally 메서드는 프로미스의 상태와 상관없이 공통적으로 수행 해야 할 처리 내용이 있을때 유용하다. 언제나 프로미스를 반환한다.

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

---

🌱 프로미스의 정적 메서드

🌿 Promise.all

여러 개의 비동기 처리를 모두 병렬 처리할 때 사용한다.

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))

const res = []
requestData1()
  .then(data => {
    res.push(data);
    return requestData2();
  })
  .then(data => {
    res.push(data);
    return requestData3()
  })
  .then(data => {
    res.push(data);
    console.log(res);
  })
  .catch(console.error)

세 개의 비동기 처리를 순차적으로 처리한다. 앞선 비동기 처리가 완료하면 다음 비동기 처리를 수행한다.
첫번째 비동기 3초 , 두번째 비동기 2초, 세번째 비동기 1초 = 총 6s
세 개의 비동기 처리는 서로 의존하지 않고 개별적으로 수행한다. 앞선 비동기 처리 결과를 다음 비동기 처리가 사용하지 않는다. 그래서 비동기 처리를 순차적으로 처리할 필요가 없다.

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]
  .catch(console.error)

• 첫번째 프로미스는 3초후에 1을 resolve
• 두번째 프로미스는 2초후에 2를 resolve
• 세번째 프로미스는 1초후에 3을 resolve

promise.all은 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되면 종료한다.
하지만 인수로 전달받은 배열의 프로미스가 하나라도 rejected 상태가 되면 나머지 프로미스가 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료한다.

🌿 Promise.race

프로미스 요소로 갖는 배열 등의 이터러블을 인수로 전달 받음 , Promise.all과는 다르게 모든 프로미스가 fulfilled 상태가 되는것을 기다리는 것이 아니라 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve 하는 새로운 프로미스를 반환한다.

Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)),
  new Promise(resolve => setTimeout(() => resolve(3), 1000)),
])
  .then(console.log) // 3
  .catch(console.log)

하지만 Promise.race 메서드에 전달된 프로미스가 하나라도 rejected 상태가 되면 에러를 reject 하는 새로운 프로미스를 즉시 반환한다.

🌿 Promise.allSettled

전달받은 프로미스가 모두 settled 상태 (비동기 처리가 수행된 상태, rejected 상태)가 되면 처리 결과를 배열로 반환

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!' }
// ]

반환한 배열에는 fulfiled 또는 rejected 상태와는 상관없이 promise.allSettled 메서드가 인수로 전달받은 모든 프로미스들의 처리 결과를 담는다.

---

🌱 마이크로태스크큐

setTimeout(()=> console.log(1),0)

Promise.resolve()
  .then(() => console.log(2))
  .then(() => console.log(3))

1 -> 2 -> 3 순으로 출력 될 것처럼 보이지만 2 -> 3 -> 1 로 출력된다.
그 이유는 프로미스가 마이크로태스크큐 이기 때문이다.
마이크로태크큐는 태스크큐보다 우선순위가 높다.
이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. 이후 마이크로 태스크 큐가 비면 태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.

---

참고

모던 자바스크립트 책