async, await에 대해서

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

오늘은 자바스크립트의 async, await에 대해서 간단하게 알아보았습니다.

---

본문

async

async를 사용하면 항상 Promise를 반환합니다.

async function getName() {
    return "Mike"
}

console.log(getName()) // Promise 반환

 

이를 이용하여 Promise의 .then() 메서드를 사용할 수 있습니다.

async function getName() {
  return "Mike";
}

getName()
  .then((name)=> {
  console.log(name); // Mike
})

 

.catch() 메서드도 사용할 수 있습니다.

async function getName() {
  throw new Error("err...")
}

getName()
  .catch((err)=> {
  console.log(err);
})

 

await

async 함수 내에서만 사용할 수 있으며, async가 반환한 Promise가 저장될 때까지 기다렸다가 실행됩니다.

function getName(name) {
  return new Promise((res,rej)=> {
    setTimeout (() => {
      res(name)
    }, 1000) // 1초후 name을 res로 반환함
  })
}

async function showName() {
  const result = await getName("mike") // 1초후 mike를 반환함
  console.log(result)
}

showName()

 

async / await를 이용하여 promise를 대체

이전 글에서 작성했던 Promise를 async / await 를 사용하여 변경해 봅니다.

const order1 = () => {
  return new Promise((res,rej)=> {
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000)
  })
}

const order2 = (message) => {
  console.log(message)
  return new Promise((res,rej)=> {
    setTimeout(()=>{
      res("2번 주문 완료");
    },3000)
  })
}

const order3 = (message) => {
  console.log(message)
  return new Promise((res,rej)=> {
    setTimeout(()=>{
      res("3번 주문 완료");
    },2000)
  })
}

console.log("시작")
async function orders() {
  try {
    const result = await Promise.all([order1(), order2(), order3()]);
    console.log(result);
  } catch (e) {
    console.log(e)
  }
  console.log("종료")
}
orders()

 

---

Reference

• https://youtu.be/Uh8u20MD978