Promise

Promise

: 자바스크립트에서 비동기 처리에 사용되는 객체
-> 실행은 바로 하되 결괏값은 나중에 받는 객체
-> 결괏값은 실행이 완료된 후 then 이나 catch 메서드를 통해 받는다

Promise 가 필요한 이유

: 비동기 처리를 위해서는 콜백 함수를 사용하게 되는데, 콜백 함수가 많아지면 코드 가독성이 안좋아진다

Promise 상태(states)

: new Promise() 로 프로미스를 생성하고 종룔될 때까지 3가지 상태를 갖는다

• Pending(대기) : 비동기 처리가 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

: new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다
메서드 호출할 때 콜백 함수를 선언할 수 있다
콜백 함수의 인자는 resolve, reject

Fulfilled(이행)

• 콜백 함수의 resolve를 실행하면 이행(Fulfilled) 상태가 된다

• 완료 라고도 할 수 있다

• new Promise((resolve, reject) => {
    resolve()
  })

• 이행 상태가 되면 then() 을 사용해서 결과 값을 받을 수 있다

• const promise = new Promise((resolve, reject) => {
      const message = '성공'
    resolve(message)
  })
  
  promise
    .then((message) => {
    console.log(message)
  })

Rejected(실패)

• reject 을 호출하면 실패 (Rejected) 상태가 된다

• new Promise((resolove, reject) => {
      reject()
  })
  

• 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch() 로 받을 수 있다

• const promise = new Promise((resolve, reject) => {
    const error = new Error('에러')
    reject(error)
  })
  
  promise  
  .catch((err) => {  
  console.error(err)  
  })
  

예제

  const condition = true
  const promise = new Promise((resolve, reject) => {
      if (condition) {
          resolve('성공')
      } else { 
          reject('실패')
      }
  })

  promise
  .then((message) => {
      console.log(message)
  })
  .catch((err) => {
      console.error(err)
  })
  .finally(() => {
      console.log('마지막')
  })

여러개의 프로미스 연결하기

const condition = true
const promise = new Promise((resolve, reject) => {
  if (condition) {
      resolve('성공')
  } else { 
      reject('실패')
  }
})  
promise
.then((message) => {
  return new Promise((resolve, reject) => {
    resolve(message+" 첫번쨰")
  })
})

.then((message2) => {
  console.log(message2)
  return new Promise((resolve, reject) => {
    resolve(message2+" 두번쨰")
  })
})

.then((message3) => {
  console.log(message3)
})

.catch((err) => {
  console.error(err)
})

예외 처리

• .then()의 두번째 인자로 에러를 처리할 수 있다
• catch() 를 사용하는게 효율적