🔗 Promise

비동기 작업이 완료할 미래의 완료 또는 실패와 그 결과 값을 알려준다.

Promise는 자바스크립트 비동기 작업에서 사용되는 객체이다. 비동기 작업은 특정 코드가 실행 완료 될 때까지 기다리지 않고 다음 코드를 먼저 실행시킨다. Promise는 주로 서버에서 데이터를 받을 때 사용되는데 데이터가 화면에 구현되기 전에 Promise가 성공 또는 오류를 처리해주고 오류일 때, 오류를 해결 할 수 있는 로직을 작성해주면 문제점을 해결 할 수 있다. 즉 무슨 일을 하는지는 Primise가 모르지만 실패하건 성공하건 어떤일을 실행해준다.

Promise문법에는 클래스, 콜백함수, 호이스팅, 클로저 등 많은 문법?이 사용되어 어렵게 느껴지는 것 같다.

📖 Promise resolve

function main() {
  const getPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Done!")
    }, 3000)
  })
  getPromise
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.error(error)
    })
}
const btn = document.querySelector(".btn")
btn.addEventListener("click", main)

HTML의 btn클래스를 갖고있는 버튼을 누르면 함수가 실행되도록 해주었다.
Promise는 resolve와 reject 두개의 인자를 받는데 첫번째로 resolve의 실행은 성공함수로, 성공시 호출되는 함수then에서 인자 result가 resolve의 값 "Done!"을 받아 출력해준다.

버튼을 누르고 Promise가 실행되어 3초뒤에 콘솔창에 정상적으로 출력되는 Done! 을 확인했다.

📖 Promise reject

function main() {
  const getPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Done!")
    }, 3000)
  })
  getPromise
    .then((result) => {
      console.log(result)
    })
    .catch((error) => {
      console.error(error)
      console.log("에러입니다.")
    })
}
const btn = document.querySelector(".btn")
btn.addEventListener("click", main)

위와 같은 함수를 똑같이 사용하여 Promise의 reject를 받아보았다. 두번째 인자 reject의 실행은 실패함수로, 실패(오류)시 호출되는 함수 catch의 인자와 연결되어 error를 출력한다.

버튼을 누르고 3초 뒤에 콘솔창에서 오류를 확인 할 수 있었다.

🔗 Async & Await

async와 await는 비동기 처리를 하기 위해서 사용하는 함수이다. 이 문법은 어려운 Promise를 기반으로 만들어졌다. 함수 앞에 async를 붙히면 해당 함수는 항상 Promise를 반환한다.

async function serve() {
  const getP = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Done!")
    }, 3000)
  })
  console.log(await getP)
}
const btn = document.querySelector(".btn")
btn.addEventListener("click", serve)

Promise와 같은 값을 출력하지만 async와 await를 사용하면 위와 같이 코드가 간결해진다.
await이 getP의 실행(Promise)을 기다렸다가 getP의 Promise가 성공 resolve 를 반환해서 객체에 할당한 값이 생길때 반환해준다.

Promise를 사용했을 때와 같이 값은 정상적으로 3초뒤에 출력되는걸 확인 할 수 있었다.

📌 만약 await이 없다면??
아래와 같이 Promise에 값이 getP에 할당되지 않은 채로, Promise의 실행이 없는 채로 Promise자체를 반환한다.

console.log(getP) // Promise{}

📖 Async 에러 출력

const getPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("Done!")
  }, 3000)
})
async function serve() {
  try {
    console.log(await getPromise)
  } catch (e) {
    console.log("-----catch e-----")
    console.error(e)
  }
}
const btn = document.querySelector(".btn")
btn.addEventListener("click", serve)

버튼을 클릭했을 때 serve( )함수가 실행되고 getPromise에 Promise reject의 값(실패 값)이 할당되고 할당된 값을 받아오면 catch가 실행되어 받아온 인자를 에러로 출력한다.

3초 뒤에 에러가 콘솔창에 정상적으로 출력되었다.