[js] async & await

📌 async & await는 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스의 단점을 보완한 문법입니다. 자바스크립트는 비동기 처리가 기본이기 때문에 이러한 비동기 함수를 동기 함수로 처리할 수 있게 해주는 async & await에 대해 알아봅시다!

---

✏️ async 함수

async function f() {
  return 1;
}

async는 함수 앞에 위치합니다. 이 함수는 해당 프라미스를 반환합니다.

async function f() {
  return 1;
}

f().then(alert); // 1

✏️ await

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

await는 async 함수 안에 있으며, 다른 프라미스가 실행될때까지 기다립니다. 이러한 문법을 사용하여 행동할 수 있는 것들이 많습니다.

✏️ async & await 사용법

function timer(time) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(time)
    }, time)
  })
}

async function number() {
  console.log('inner start')
  var time = await timer(1000)
  console.log('timer:'+time)
  time = await timer(1000)
  console.log('timer:'+time)
   time = await timer(1000)
  console.log('timer:'+time)
  console.log('inner finish')
}

async function numberpuls() {
  console.log('outside start')
  await number()
  console.log('outside finish')
}

numberpuls()

이렇게 코드를 짜면

이렇게 나옵니다.

✨ 이런 식으로 await를 사용하여 기다릴 곳을 기다리게 하고 진행하게 할 곳은 진행하도록 구현해줄 수 있습니다!

(async () => {
  let response = await fetch('/article/promise-chaining/user.json')
  let user = await response.json()
  ...
})()

await는 말그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 해줍니다. 그래서 즉시실행함수로 처음 렌더링될 때 바로 읽어줄 수도 있고,

async function showAvatar() {

  // JSON 읽기
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  
  // github 사용자 정보 읽기
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();
  ...
}

이렇게 await를 붙여 순서대로 데이터를 읽어올 수 있게 구현할 수 있습니다. 프라미스를 사용하는 것보다 비교적 간단하고 보기 쉽게 구현되었습니다.

⛓️ 참고사이트
⛓️ 참고사이트