[Java Script]비동기의 핵심 async await에 대해 알아보자!

[async - await]

promise를 더욱 간결하고, 간편하게,

동기적으로 실행되는 것 처럼 보이도록 만들어주는 것이다.

새로운 것이 추가된 것이 아니라 조금 간편한 api를 제공하는 것이므로

syntatic sugar이라고 말한다.

 

 

무조건 async가 좋고 promise로 대체해야한다는 것은 아니다.

 

 

자바스크립트는 동기적으로 실행되기 때문에

만약에 유저 데이터를 받아오는 기능이 10초가 걸린다면

비동기 처리를 하지 않으면 그 밑에서 ui를 그려주는 함수를 10초동안 실행하지 않는다.

그런 현상을 없애기 위해서 비동기처리를 하여 다른 함수가 실행될 동안 밑의 함수를 실행시키는 것이다.

 

//1. async
async function fetchUser(){
  return 'ellie'; //자동으로 promise를 리턴함 
}

const user = fetchUser()
console.log(user)

 

 

[await]

기다려!

async가 있는 함수에서만 사용할 수 있는데

promise가 실행될때까지 기다려준다.

 

예제

//2. await
function delay(ms) {
    return new Promise(resolve => setTimeout(() => {
        resolve
    }, ms))
}

async function getApple() {
    await delay(3000);
    return '🍚'
}
async function getBanana() {
    await delay(3000);
    return '🌮'
}

function pickFruits() {
    return getApple()
    .then(apple =>{
        return getBanana().then(getBanana => `${apple} + ${banana}`)
    })
}
pickFruits().then(console.log)

마지막 pickFruits를 보면

콜백지옥과 비슷하다

promise도 너무 중첩으로 쓰다보면 이렇게 가독성이 떨어질 때가 있다.

 

 

async function pickFruits() {
   const apple = await getApple()
   const banana = await getBanana()
   return `${apple} + ${banana}`
}

async 와 await을 써주면 이렇게 동기적으로 코드를 작성해주듯이 하면 된다.

 

async function pickFruits() {
  try{
    const apple = await getApple()
    const banana = await getBanana()
  }
  catch{
      console.log()
  }
   return `${apple} + ${banana}`
}

이렇게 try catch문으로 에러처리를 해준다.

 

 

 

[병렬처리]

그런데 여기서 하나씩 하나씩 실행해서 총 6초가 걸리는데

애플을 받아오는 것과 바나나를 받아오는 것은 서로 연관이 없기 때문에 병렬처리를 해주어야한다.

그렇지않으면 시간이 매우 오래걸리고 비효율적이기 때문이다.

async function pickFruits() {
 const applePromise = getApple()
 const bananaPromise = getBanana()
 const apple = await applePromise;
 const banana = await bananaPromise;
   return `${apple} + ${banana}`
}

이렇게 프로미스를 만들어서 사용하면

프로미스는 만들자마자 실행되기 때문에 병렬 처리가 된다.

하지만 이렇게 서로 연관없는 프로미스들을 이렇게 이상하게 코드를 짜지 않는다.

 

 

[Promise apis]

여러가지 api들이 있는데 그 중에서 Promise.all이라는 api가 있다.

위와 같은 효과를 나타내는 것이다.

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join('+'))
}

 

Promise.race

배열 안의 promise들 중에서 제일 빠르게 등장하는 것만 보여준다.

 

function pickOnlyOne () {
    return Promise.race([getApple(), getBanana()])
}