[javascript] async와 await의 개념과 사용법

비동기 처리 방식

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기반입니다.
비동기 처리는 그 결과가 언제 반환될 지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데요.
대표적인 동기식 처리 방식에는 setTimeout이 있고, callback, promise가 있습니다.

---

async와 await 사용 이유

• async와 await 방법은 기존의 처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단합니다.

Promise 코드

function p() {
return new Promise((resolve, reject) => {
	resolve('hello');
// or reject(new Error('error');
	});
}

p().then((n) => console.log(n));

async 코드

async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어줍니다.
	return 'hello'; 
}

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

이처럼 async를 사용하면 promise 코드를 훨씬 직관적으로 나타낼 수 있습니다.
함수에 async만 붙이면 자동으로 promise 객체로 인식되고, return값은 resolve()값과 동일합니다.

async와 await 사용법

function 앞에 async를 붙여줍니다.
promise 객체 앞에 await를 붙여줍니다.

• async가 붙은 함수는 promise 객체를 반환합니다. 따라서 .then((a) => {}를 이용할 수 있습니다.

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

async function getApple() {
    await delay();
    return "apple";
}

async function getBanana() {
    await delay();
    return "banana";
}

function getFruites() {
    getApple()
        .then((a) => { // 리턴값이 promise의 resolve()이므로 then 가능
            getBanana()
                .then((b) => console.log(`${a} and ${b}`));
        })
}

getFruites(); // 결과 : apple and banana

• await는 promise가 완료될 때까지 기다립니다.
• await는 promise가 resolve한 값을 내놓습니다.

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

async function getApple() {
    await delay();
    return "apple";
}

async function getBanana() {
    await delay();
    return "banana";
}

async function getFruites() {
    let a = await getApple(); // 리턴값이 promise의 resolve()이므로 대입 가능
    let b = await getBanana(); // getApple()이 처리되고 getBanana()가 처리됩니다.
    console.log(`${a} and ${b}`);
}

getFruites(); // 결과 : apple and banana

async의 예외처리 방법

promise 객체를 사용하기 때문에 .then / .catch를 이용해서 예외처리를 하는 방법이 있습니다.

async function p2() {
    throw 'error';
    //throw new Error("error");
    //await Promise.reject(new Error("error"));
    //return Promise.reject(new Error("error"));
}

p2()
    .then((n) => console.log(n))
    .catch((n) => console.log(n));

async는 throw로 예외처리 할 수 있습니다.

async function myAsyncErrorFun() {
  throw 'myAsyncError';
}

const resultAsync = myAsyncErrorFun().catch((e) => {
  console.error(e);
});

async 함수 내에서 await하는 Promise의 예외가 발생하면 throw를 반환합니다.

async function myAsyncFunCheckErrorNextCode() {
  console.log(new Date());
  await rejectedWait(1); // throw를 반환하고, 아래 구문들은 실행되지 않는다.
  console.log(new Date());
}
const resultAsyncFunCheckErrorNextCode = myAsyncFunCheckErrorNextCode();

async 함수 내에서 try / catch를 사용하는 방법이 있습니다.
(반드시 await를 통해서 동기식으로 만들어주어야 합니다)

async function myAsyncFunTryCatch1() {
  console.log(new Date());
  try {
    await rejectedWait(1); // throw 되었다.
  } catch (e) {
    console.error('myAsyncFunTryCatch1', e);
  }
  // 그 다음일들을 쭉쭉할 수 있다.
  console.log(new Date());
}
const resultAsyncFunTryCatch1 = myAsyncFunTryCatch1();

💡참고
Promise의 예외처리

• reject를 이용하면 promise에 대한 예외처리를 진행할 수 있습니다.

function myPromiseErrorFun() {
  return new Promise((_, reject) => {
    reject('myPromiseError!');
  });
}
const resultPromise = myPromiseErrorFun().catch((e) => {
  console.error(e);
});

• reject에 에러 메시지를 담을 수 있고, .catch(e) => { console.error(e) }를 통해 그 메시지를 표시할 수 있습니다.