프론트엔드

동기 비동기관련 코드

zayn 2024. 10. 22. 20:23

1. 동기 / 비동기 비교

  1. 동기와 비동기 코드 비교하기

        1) 동기 코드

console.log("손님1 커피 주문");
console.log("손님1 커피 제조 완료");

console.log("손님2 커피 주문");
console.log("손님2 커피 제조 완료");

 

       2) 비동기 코드

console.log("손님1 커피 주문");
setTimeout(() => {
  console.log("손님1 커피 제조 완료");
}, 2000); // 2초 후에 실행

console.log("손님2 커피 주문");
setTimeout(() => {
  console.log("손님2 커피 제조 완료");
}, 1000); // 1초 후에 실행

 

2. Promise 사용해보기

  1. Promise로 비동기 작업 처리하기

 

       콜백함수로 처리한 코드

function orderCoffee(order, callback) {
  console.log(`${order} 커피 주문 중...`);
  setTimeout(() => {
    if (order) {
      callback(null, `${order} 커피 준비 완료`);
    } else {
      callback("주문 오류", null);
    }
  }, 2000);
}

orderCoffee("아메리카노", (error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log(result);
  }
});

 

          Promise로 변환한 코드

function orderCoffee(order) {
  return new Promise((resolve, reject) => {
    console.log(`${order} 커피 주문 중...`);
    setTimeout(() => {
      if (order) {
        resolve(`${order} 커피 준비 완료`);
      } else {
        reject("주문 오류");
      }
    }, 2000);
  });
}

orderCoffee("카푸치노")
  .then(result => console.log(result))
  .catch(error => console.error(error));

 

 

3. async/await 적용하기

 

1. 프로미스 코드

function orderCoffee(order) {
  return new Promise((resolve, reject) => {
    console.log(`${order} 커피 주문 중...`);
    setTimeout(() => {
      if (order) {
        resolve(`${order} 커피 준비 완료`);
      } else {
        reject("주문 오류");
      }
    }, 2000);
  });
}

orderCoffee("카푸치노")
  .then(result => console.log(result))
  .catch(error => console.error(error));

 

2. async/await 코드

async function makeCoffee() {
  try {
    const result = await orderCoffee("카푸치노");
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

makeCoffee();

 

4. Promise all

 

  1. Promise.all 이용하여 병렬로 작업처리

async function makeMultipleCoffees() {
  try {
    const [coffee1, coffee2] = await Promise.all([
      orderCoffee("라떼"),
      orderCoffee("에스프레소")
    ]);
    console.log(coffee1);
    console.log(coffee2);
  } catch (error) {
    console.error(error);
  }
}

makeMultipleCoffees();

 

'프론트엔드' 카테고리의 다른 글

CODE_DAY3  (0) 2024.11.01
CODE_DAY 1  (0) 2024.10.30
동기,비동기 / promise & async/await  (1) 2024.10.21
프론트엔드 002  (0) 2024.09.06
프론트엔드 001  (6) 2024.09.05