[JS] Promise

💡 Promise와 Async/Await 배우기 전에 동기와 비동기 방식을 이해해야 합니다.

📖 동기

• 동기(직렬적)는 순차적으로 작업(task)을 수행하고 요청을 보낸 다음
  응답을 받고 나서 다음 동작이 이루어집니다.

• 순서대로 작업을 수행하고 어떤 작업을 수행하고 있으면,
  그 작업 순위가 제일 우선이 되고 현재 작업이 처리된 후에 순차적으로 처리합니다.

• 동기 방식은 블로킹이 발생합니다.

📖 비동기

• 비동기는 현재 작업하고 있는 동작의 처리 여부와 관계없이
  다음 작업을 실행하게 됩니다.

• 동기 방식과 달리 처리가 완료되는 순서를 보장하지 않습니다.

• 동기 방식에서는 블로킹이 발생하지만, 비동기 방식은 블로킹이 발생하지
  않습니다.

📖 promise

• 비동기 처리를 위해 콜백 함수를 사용하는데 콜백 함수를 많이 쓰게 되면
  가독성이 나빠지고 에러 처리가 힘들어지는 콜백 지옥에 빠질 수 있기 때문에
  콜백 함수의 단점을 보완하기 위해 ES6부터 도입되었습니다.

• 생성자 함수를 통해 인스턴스화하고 resovle와 reject 함수를 인자로 전달받는 콜백 함수를 인자로 전달받고
  인자로 전달받은 콜백 함수를 내부에서 비동기 처리합니다.
  
  

resovle : 비동기 처리가 성공했을때 받는 인자
reject : 비동기 처리가 실패했을때 받는 인자

아래 예시는 promise 함수에 index 값을 넣고, 10보다 크면 resovle 인자를 호출 크지 않으면 reject 인자를 호출하도록 구현했습니다.

const proAdd = index => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(index > 10) {
        reject(`${index}는 10보다 클 수 없습니다`)
        return
      }
      console.log(index)
      resolve(index + 1)
    },1000)
  })
}
proAdd(11)
  .then(res => console.log(res))
  .catch(err => console.log(err))
// 출력 결과 : 11는 10보다 클 수 없습니다

promise에서 비동기 처리에 성공했는지 실패했는지 상태 정보로 가집니다.

pending : 비동기 처리가 아직 수행되지 않은 상태
fulfilled : 비동기 처리가 수행된 상태 (성공)
rejected : 비동기 처리가 수행된 상태 (실패)
settled : 비동기 처리가 수행된 상태 (성공 또는 실패)

🔎 후속 처리 메서드

then

• then 메소드는 두 개의 콜백 함수를 인자로 전달 받습니다.
• 첫번째 콜백 함수는 성공(fulfilled, resolve) 시 호출되고 .
  두번째 함수는 실패(rejected, reject) 시 호출됩니다.
• then 메소드는 Promise를 반환합니다.

catch

• 예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출됩니다.
• catch 메소드는 Promise를 반환한다.

finally

• 함수가 성공하거나 실패해도관계없이 지정된 콜백 함수가 실행됩니다.