강의노트 - 15

Promise

예시1)

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

const b = () => console.log(2)

a().then(() => { b () })

예시2)

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 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(3)
      resolve()
    },1000)
  })
}

const d = () => console.log(4)

a()
  .then(b)
  .then(c)
  .then(d)
  .then(() => console.log('Done!'))

콜백지옥보다 더 단순한 코드가 간결하다, 하지만 여전히 많은 데이터를 사용하면 지저분합니다.

Resolve, Reject 그리고 에러 핸들링

에러 핸들링

const delayAdd = (index, cb, errorCb) => {
  setTimeout(() => {
    if(index > 10) {
      errorCb(`${index}는 10보다 클 수 없습니다.`)
      return
    }
    console.log(index)
    cb(index + 1)
  }, 1000)
}

delayAdd(
  11,
  res => console.log(res),
  err => console.error(err)
)

Resolve,Reject를 promise에서

const delayAdd = index => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(index > 10) {
        reject(`${index}는 10보다 클 수 없습니다.`)
        return
      }
      console.log(index)
      resolve(index + 1)
    }, 1000)
  })
}

delayAdd(13)
  .then(res => console.log(res))
  .catch(err => console.error(err))

Resolve가 실행이 되면 Reject는 실행되지 않고, Reject가 실행이 되면 Resolve는 실행되지 않습니다.