[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션 - 28강 비동기처리(async, await, Promise.all, Promise.race)

async, await는 promise를 더 편하게 쓰기 위한 것이다.

async / await

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
} //특정 ms 이후에 resolve함수가 실행되서 promise가 끝나게 됨.

async function process() { //async를 붙여서 함수를 만듬.
  console.log("안녕하세요!");
  await sleep(1000); //기다리게 하고 싶을때 함수명 앞에 await을 붙임.
  console.log("반갑습니다!");
  return true;
}

process().then((value) => {
  console.log(value);
});

이런식으로 사용할 수 있다.
promise에서 에러를 잡고 싶을 때에는 아래와 같이 한다.

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

async function makeError() {
  await sleep(1000);
  const error = new Error();
  throw error; //에러를 발생하고 싶을 때는 throw
}

async function process() {
  try {
    //에러를 잡고 싶을때는 try-catch문을 사용.
    await makeError();
  } catch (e) {
    console.error(e);
  }
}
process(); //Error 반환

promise all

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

const getDog = async () => {
  await sleep(1000);
  return "멍멍이";
};

const getRabbit = async () => {
  await sleep(500);
  return "토끼";
};

const getTurtle = async () => {
  await sleep(3000);
  return "거북이";
};

async function process() {
  const dog = await getDog();
  console.log(dog);
  const rabbit = await getRabbit();
  console.log(rabbit);
  const turtle = await getTurtle();
  console.log(turtle);
}
process(); //멍멍이 - 토끼 - 거북이 순으로 나옴. 하나씩 처리하고있음.

여기서 process를 보면 1초뒤 dog를 실행하고 0.5초 뒤 rabbit을, 또 3초 뒤 turtle을 실행하는 것을 볼 수 있다. 이렇게 순서대로 말고 동시에 셋을 다같이 처리할 수는 없을까? 그럴때 Promise.all을 사용하면 된다.

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

const getDog = async () => {
  await sleep(1000);
  return "멍멍이";
};

const getRabbit = async () => {
  await sleep(500);
  return "토끼";
};

const getTurtle = async () => {
  await sleep(3000);
  return "거북이";
};

async function process() {
  const time = Date.now();
  const [dog, rabbit, turtle] = await Promise.all([getDog(), getRabbit(), getTurtle()]); //한번에 처리
  console.log(dog);
  console.log(rabbit);
  console.log(turtle);
  console.log(Date.now() - time);//걸린시간 계산.
}
process(); //멍멍이-토끼-거북이-3002초 순서대로 나옴.

여기서 promise.all을 promise.race로 바꿔주면 가장 실행이 빨리 끝난 함수만 반환해준다. 아래와 같이 코드를 바꿔보고 결과를 봐보자.

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

const getDog = async () => {
  await sleep(1000);
  return "멍멍이";
};

const getRabbit = async () => {
  await sleep(500);
  return "토끼";
};

const getTurtle = async () => {
  await sleep(3000);
  return "거북이";
};

async function process() {
  const time = Date.now();
  const first = await Promise.race([
    getDog(),
    getRabbit(),
    getTurtle()
  ]);
  console.log(first);
}
process();//가장 빨리 끝난 토끼(0.5초)만 반환.

promise.all은 세 함수중에 하나라도 에러가 발생하면 error를 띄워버린다. 근데 promise.race 같은 경우에는 그중에서 제일 빨리 연산을 끝난애가 에러일 때에만 에러로 간주한다는 것 알아두자.

마치면서

얘네를 언제 쓸 수 있는지 아직 잘 모르겠다. ㅜㅜ 실질적인 예시를 하나 빨리 만들어보고 싶다. 너무 이론만 반복하고 있는 느낌이…. 오늘은 여기까지..
시청 영상 28강 3~4까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp