드림엘리 : Javascript - 14. Async(3) async & await

async & await

개념

• 비동기의 핵심
  • 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다.
• promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들
• promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다.
• 기존에 존재하는 promise 위에 조금 더 간편한 api를 제공
• syntatic sugar : 기존에 존재하는 것 위에 또는 기존에 존재하는 것을 감싸서 조금 더 간편하게 쓸 수 있는 api를 제공하는 것 ex) async/await, class
  • async와 await은 promise를 감싸고 있는 promise를 조금 더 간편하게 쓸 수 있는 syntatic sugar이다
  • class의 경우 전혀 새로운 것이 아니라 prototype을 베이스로 한 그 위에 살짝 덧붙여진 그럴싸 해보이는 syntatic sugar이다
• clear syle of using promise : 깔끔하게 promise를 사용할 수 있는 방법
  • 그렇다고 promise가 무조건 나쁜 방법이고 async & await로 대체해서 사용해야 한다는 것은 절대 아니다. promise를 써야지 맞는 경우가 있고 또는 async & await로 변환해야지 조금 더 깔끔해지는 경우가 있다.
• try와 catch 이용해서 error 처리도 가능

1. async

• async 키워드가 붙은 함수는 자동적으로 함수 안 코드 블럭들이 promise로 변환되어짐

async function Name() {
    return value;
}

2. await

• await 키워드는 async 키워드가 붙은 함수 안에서만 사용 가능
• await이 붙은 함수는 그것을 다 끝낼 때 까지 기다린 후 다음 코드 실행한다.
• await 병렬 처리
  • 서로 연관되어 있지 않은 코드들은 순차적으로 기다릴 필요가 없는 것을 개선하기 위한 것
  • 연관되어 있지 않은 코드를 바로 각자 실행 시킬 수 있음
  • promise를 만들기 -> 만든 promise 앞에 await 키워드 붙이기
  • async function getApple() { await delay(1000); return '🍎'; } async function getBanana() { await delay(1000); return '🍌'; } // await 병렬 처리 async function pickFruits() { // promise 만들기 const applePromise = getApple(); const bananaPromise = getBanana(); // await 키워드 붙이기 const apple = await applePromise; const banana = await bananaPromise; return `${apple} + ${banana}`; }

3. useful Promise APIs

• await 병렬처리를 간단하게 해주는 Promise APIs
• all
  • Promise.all([promise1, promise2 ...])
  • promise 배열 전달 시 모든 promise들이 병렬적으로 다 받을 때까지 모아주는 api
• race
  • Promise.race([promise1, promise2 ...])
  • 어떤 것이든 상관없고 먼저 호출되는 promise만 받아오고 싶을 때 사용
  • 배열에 전달된 promise들 중 가장 먼저 값을 return하는 것만 전달되어짐