async, await

# 01. 사용하는 이유 ! 

- promise는 콜백지옥에서 벗어나 한결 깨끗한 함수형 프로그래밍 코딩을 할 수 있게 도와주지만 .. ! 

- .then .then .then 을 중첩으로 연결하면 콜백지옥처럼 가독성이 떨어짐 

- async, await 을 사용하면 비동기적인 코드를 절차적으로 사용할 수 있게 되어 가독성이 올라감 👍

 

# 02. 사용 방법

function getId() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Id1234')
    }, 1000)
  })
}
function getPassword() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('password1234')
    }, 2000)
  })
}

async function fetchInfo() {
  const id = await getId();
  const password = await getPassword();
  return [id, password];
}

fetchInfo()
  .then((info) => console.log(info))

 

Id값을 받아오는 것에 성공하면 Password값도 받아와서 배열로 반환하는 함수 예시 

 

- 함수 앞에 async를 붙이면 비동기 함수가 됨 (promise 반환)

- 이 함수 안에 원하는 또 다른 promise 값을 반환하는 함수를 순차적으로 나열할 수 있음  !

ex) getId, getPassword는 promise를 반환하기 때문에 함수 앞에 await를 써서 해당 함수의 promise가 resolve 될때까지 기다린 후 원하는 변수에 할당함

 

=> getId, getPassword 함수를 then으로 엮지 않고 보기 편하게 코드를 작성할 수 있게 되었다.