[JS] 동기와 비동기 (2) : Promise

Promise 클래스

비동기 처리를 깔끔하게 하기 위해 사용하는 객체이다.

// 기본적인 사용 형태
const a = () => new Promise((resolve, reject) => {실행내용})

resolve 함수와 reject 함수를 뒤에서 받아서 실행한다

---

• Promise를 쓰는 이유
  • 연속된 비동기 작업을 편하게 다룰 수 있음
  • 작업 상태를 쉽게 확인할 수 있음
  • 유지 보수가 편리함

• Promise는 상태(States)를 가진다.
  • Pending : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled : 완료된 상태 (resolve 함수가 호출 된 경우)
  • Rejected : 실패한 상태 (reject 함수가 호출 된 경우)

---

const a = new Promise((resolve, reject) => {
  if (조건) {
    resolve('성공')    // 인수가 then 속의 함수로 전달
  } else {
    reject('실패')     // 인수가 catch 속의 함수로 전달
  }
})

a()
  .then((res) => {console.log(res)})   // res = '성공'
  .catch((err) => {console.log(err)})  // err = '실패'

• resolve 함수에서 받은 '성공' 이라는 메세지는 then 속 함수의 인수로 전달되고, 함수가 실행된다.
• 오류 발생 시, reject 함수에서 받은 '실패' 라는 메세지가 catch 속 함수의 인수로 전달되고, 함수가 실행된다.

---

• 예시
  1. 1초 기다렸다가 1 출력하기
  2. 또 1초 기다렸다가 2 출력하기
  3. 그 이후 3 출력하기
  4. "done" 출력하기

const a = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1)
      resolve()   
    }, 1000)
  })
}
const b = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(2)
      resolve()   
    }, 1000)
  })
}
const c = () => console.log(3)

a()
  .then(b)
  .then(c)
  .then( () => {console.log('done')} )

// 1 2 3 done