[자바스크립트(JavaScript)] 비동기 함수(Async Functions)

// 비동기 함수, Async Functions

- 비동기 코드를 깔끔하게 작성하도록 도와주는 함수

- Promise 위에 적용된다.

- async와 await 키워드가 사용된다.

---

// async

- 함수 앞에 붙어 비동기 함수로 선언하는 키워드

- 따로 명시하지 않아도 항상 Promise를 반환한다.

---

const sing = async () => {
  return 'LA LA LA LA';
};

sing()
  .then(data => {
    console.log('PROMISE RESOVOLVED WITH: ', data);
  });

---

const sing = async () => {
  throw new Error('FAILED');
  return 'LA LA LA LA';
};

sing()
  .then(data => {
    console.log('PROMISE RESOVOLVED WITH: ', data);
  })
  .catch(error => {
    console.log(error);
  });

---

// await

- 비동기를 동기처럼 만들어주는 키워드

- 비동기 함수의 실행을 일시정지 시킨다.

- async와 함께 사용된다.

---

const delayedColorChange = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color;
      resolve();
    }, delay);
  });
};

async function rainbow() {
  await delayedColorChange('red', 1000);
  await delayedColorChange('orange', 1000);
  await delayedColorChange('yellow', 1000);
  await delayedColorChange('green', 1000);
  await delayedColorChange('blue', 1000);
  await delayedColorChange('indigo', 1000);
  await delayedColorChange('violet', 1000);
  return 'All DONE!';
}

async function printRainbow() {
  await rainbow();
  console.log('END OF RAINBOW');
}

printRainbow();

---

// 오류 처리

- async await를 사용할 때 error가 발생할 경우를 대비하여 try...catch를 이용한다.

---

const fakeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
      if (delay > 3000) {
        reject(`Connection Timeout : ${delay}`);
      } else {
        resolve(`Here is your fake data from ${url}`);
      }
    }, delay);
  });
};

async function makeTwoRequests() {
  try {
    let data1 = await fakeRequest('/page1');
    console.log(data1);
  } catch (error) {
    console.log('CAUGHT AN ERROR!');
    console.log(error);
  }
}