[포스코x코딩온] 웹개발자 입문 과정 5주차 | async await

1.  async / await 방식  

프로미스기반 코드를 좀 더 쓰기쉽고 읽기쉽게 하기 위해 등장했다.
비동기처리 패턴중 가장 최근에 나온 문법이다.

앞선 페이지에서 비동기를 처리하는 방법 중 3번째 방법이다.

 

2. promise 방식과 비교 

기본 코드

function fetchFruits() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const fruits = ["🍎", "🍐", "🍋"];
      resolve(fruits);
      reject(new Error("unknowm error"));
    }, 1000);
  });
}

1) promise .then(...).catch(...)방식

//promise then() 사용 시
fetchFruits()
  .then((fruits) => {
    console.log(fruits);
  })
  .catch((error) => {
    console.log(error);
  });

 

 

2) async/await 방식

에러 처리를 위해서는 try{..}catch{(error)=>{...}} 문을 사용한다.

//async await 사용 시
async function printItems() {
  try {
    const fruits = await fetchFruits();
    console.log(fruits);
  } catch (error) {
    console.log(error);
  }
}
printItems();

3. 예제

1) 장보기 코드

//장보기 코드를 async await 이용해서 변경하기
function goMart() {
  console.log("마트에 가서 어떤 음료를 살지 고민! ");
}
function pickDrink() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("고민 끝");
      product = "제로콜라";
      price = 2000;
      resolve();
    }, 1000);
  });
}
function pay() {
  // resolve() === pay()
  console.log(`상품명: ${product}, 가격: ${price}`);
}

async function exec() {
  goMart();
  await pickDrink();
  pay();
}
let product;
let price;
exec();

2) call back 지옥 코드

function call(name) {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      console.log(name);
      resolve(name); // then(name)
    }, 1000);
  });
}

function back() {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      console.log("back");
      resolve("back"); // then('back')
    }, 1000);
  });
}

function hell() {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve("callback hell");
    }, 1000);
  });
}

async function exec() {
  const name = await call("kim"); //실행 + 결괏값  , 동시에 실행됨
  console.log(`${name} 반가워`);
  const txt = await back();
  console.log(`${txt}를 실행했구나"`);
  const message = await hell();
  console.log(`여기는 ${message}`);
}
exec();

3) 배경 색 순차 변경 코드  

function changeBgcolor(newColor) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.querySelector("body").style.backgroundColor = newColor;
      resolve();
    }, 1000);
  });
}
const colors = ["red", "orange", "yellow", "green", "blue"];
async function exec() {
  for (const color of colors) {
    await changeBgcolor(color);
  }
}
exec();