Javascript_ async, await

Javascript_ async, await

1. async, await
-> 함수 앞에 사용

async function fetchUser() {
  return "kim";
}
// delay() 함수는 value ms 후에 실행하는 함수.  
async function getApple() {
  await delay(1000); 
  return "🍎";
}

async function getBanana() {
  await delay(1000);
  return "🍌";
}

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

2. async, await 에러 처리
-> try, catch 사용

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

    }
}

❌ async, await 단점
-> 위 pickFruit()에서 await 때문에 getApple()을 딜레이 시간동안 호출하고, 이후에 getBanana()를 딜레이 시간동안 호출하게됨.
-> getApple()과 getBanana()는 서로 순차적으로 불러올 필요가 없기 때문에 비효율적임. 해결책은 아래


async, await 비효율적인 문제 해결책?

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

❌ 어느정도는 해결되지만 더 깔끔한 코드로 작성.


3. useful Promise APIs

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

Promise.all api -> 배열에 들어있는 모든 인자들이 다 받아졌을때 실행.


3. useful Promise APIs

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

Promise.race api -> 배열에 들어있는 모든 인자들 중 먼저 실행되는 것만 가져옴. 그래서 레이스인가..


+++++++ 2021-11-11 추가 내용

async, await 예시

let coffeeMaker = async function () {
  let coffeeList = "";
  let _addCoffee = async function (name) {
    coffeeList += (coffeeList ? "," : "") + (await _addCoffee(name));
  };
};

삼항연산자 사용해서 coffeeList가 있으면 ',' 더하고 없으면 ""를 더해라.
그리고 기다렸던(await) _addCoffee(name)을 실행해라