[js] async & await 정리

async & await 사용방법, useFul Promise APIs(Promise.all(), Promise.race())

 

async & await란?

1. async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 
2. 비동기 방식을 사용함에 있어 Promise보다 명확한 방식이라고 할 수 있다.

3. 비동기 처리 동작은 기본적으로 callback, Promise와 동일하지만 앞 둘의 단점을 보완했다.

 

---

 

1 .async 사용방법

동기적 실행 

// 1. Sync
function fetchUser() {
    // 네트워크 응답이 10초 걸린다고 가정한다.
    return 'userName';
}

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

console.log('Done!'); // 10초후에 Done!을 볼 수 있다.

위 코드에서 userName을 가져오는데 10초가 걸린다고 가정한다면 10초후에 Done!을 볼 수 있다.

아래 많은 작업들이 있다면 수많은 작업들이 10초간 대기상태에 있을 것이다.

 

위 문제를 Promise 방식으로 해결한 코드예제이다.

// Prmoise
function fetchUser() {
	return new Promise((resolve, reject) => {
    	// do network request in 10secs..
    	resolve("userName");
    }
}

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

console.log('Done!');

 

위 문제를 async 방식으로 해결한 코드예제이다.

// Async
async function fetchUser() {
    // do network request in 10secs..
    return 'userName';
}

fetchUser();

console.log('Done!');

위 두 방식을 사용하면 10초를 기다리지 않아도 Done!을 바로 확인할 수 있다.

 

---

 

2. await 사용방법

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
  await delay(1000);
  return 'apple';
}

// ex. Promise
function getBanana() {
    return delay(3000).then(() => "banana");
}

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

pickFruits().then(console.log);

위와 같이 Promise를 사용한 코드가 있다.

 

위 코드를 아래와 같이 await로 비동기처리를 하면서 동기적으로 필요한 값이 있을 때 기다리며 처리할 수 있다.

async function getBanana(){
  await delay(1000);
  return 'banana';
}

async function pickFruits(){
    const apple = await getApple(); // 1초 걸림
    const banana = await getBanana(); // 1초 걸림
    // 2초 걸림
    
    const applePromise = getApple();
    const bananaPromise = geBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    // 1초 걸림 (병렬 수행하기 때문이다)
    
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

주석의 내용처럼 2초가 기다리는 것을 Promise를 사용하면 병렬로 수행할 수 있다.

왜냐하면 Promise를 이용하여 자원을 동시에 해놓고 한 번에 받는 방식으로 생각하면 편하다.

 

 

위 코드 또한  깨끗한 코드와는 거리가 있다.
아래 유용한 Promise APIs의 pickAllFruits() 함수를 사용하여 보다 보기 좋게 만들 수 있다.

---

 

3. useFul Promise APIs

 

Promise 전체를 배열로 출력하는 Promise.all()이다.

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

pcikAllFruits().then(console.log);

 

Promise 중에 가장 먼저 되는 하나만 출력하는 Promise.race()이다.

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

pickOnlyOne().then(console.log);