[JavaScript] 자바스크립트에서의 비동기 처리 async - await

비동기 처리는 결과가 언제 반환되는지 알 수 없어서 동기식으로 처리하는 기법들을 사용해야 하는데

대표적으로 setTimeout, callback, promise가 있다.

그 외에도 사용법이 간단해진 비동기 처리 방법이 있는데 바로 async와 await이다.

우선 몰라도 좋으니 아래 코드를 참고하여 얼마나 간단해졌는지 확인만 해보자.

// Promise
const p1 = () => {
  return new Promise((resolve, reject) => {
    resolve('성공');
  });
};

//async
async function p2 () {
  return '성공';
};

p2.then((value) => console.log(value));

---

1. async와 await

async와 await는 Promise를 좀 더 편하게 사용하는 것이다.

사용법은 function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await를 붙이면 된다.

 

- async가 붙은 함수는 Promise를 반환하며 Promise가 아닌 것은 Promise로 감싸 반환한다.

- await 키워드를 만나면 Promise가 처리될 때까지 기다린다.

- Promise가 처리되어 resolve될 시엔 값만 따로 추출해서 리턴한다.

- await는 Promise.then() 메서드보다 좀 더 세련되게 Promise의 결과값을 얻을 수 있다. (가독성 👍🏻)

 

💡 async와 await가 Promise를 완벽히 대체하는 것은 아니다.

비동기는 Promise로 처리하고, async와 await는 비동기를 동기처럼 사용하는 기법이다.

기존에는 Promise에 직접 then() 메서드를 사용하여 동기 처리를 하였지만, await를 사용하면 바로 동기처리가 된다.

아래 예제를 보자.

async function p1 () {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('성공'), 1000);
  });
  
  const result = await promise; // then() 메서드 대신 await로 비동기를 받아 가독성 좋아짐.
  console.log(result); //'성공'
};

async function p2 () {
  const result = await Promise.resolve('성공'); // Promise의 then 결과를 바로 받음.
  return result;
};

p2(); //'성공'

---

2. async와 await로 최적화 시키기

1️⃣ then() 메서드

const p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('첫번째'), 1000);
  });
};

const p2 = (msg) => {
  console.log(msg);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('두번째'), 3000);
  });
};

const p3 = (msg) => {
  console.log(msg);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('세번째'), 2000);
  });
};

p1()
  .then(resolve => p2(resolve))
  .then(resolve => p3(resolve))
  .then(resolve => console.log(resolve))
  .catch(console.log('실패'));

 

2️⃣ async와 await

...

async function exFunc() {
  const result1 = await p1();
  const result2 = await p2();
  const result3 = await p3();
  console.log(result3);
}

exFunc();

 

3️⃣ reject될 때

const p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('첫번째'), 1000);
  });
};

const p2 = (msg) => {
  console.log(msg);
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('에러')), 3000);
  });
};

const p3 = (msg) => {
  console.log(msg);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('세번째'), 2000);
  });
};
  
async function exFunc() {
  const result1 = await p1();
  const result2 = await p2();
  const result3 = await p3();
  console.log(result3);
}

exFunc();

'첫번째'가 출력되고 reject() 함수를 실행시켰기 때문에 에러가 발생한다.

그리고 그 이후엔 진행되던 것이 멈추게 된다.

 

그럴 땐 try catch문을 이용하여 에러가 발생해도 이후에 작업이 진행되도록 설정할 수 있다.

아래 코드를 보자.

...
  
async function exFunc() {
  try {
    const result1 = await p1();
    const result2 = await p2();
    const result3 = await p3();
    console.log(result3);
  } catch (e) {
    console.log(e);
  }
}

exFunc();