JavaScript | async & await

📍 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 사용법

1️⃣ function 앞에 async 를 추가한다.promise 객체 앞에 await 를 추가한다.

2️⃣ async 가 붙은 함수는 promise 객체를 리턴한다. 따라서 .then((a) => {} 를 이용할 수 있다.

3️⃣ await 는 promise 가 완료될 때까지 기다린다.

4️⃣ await 는 promise 가 resolve 한 값을 리턴한다.

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

async function getId() {
    await delay();
    return "id";
}

async function getName() {
    await delay();
    return "name";
}

function getProfile() {
    getId()
        .then((a) => { // 리턴값이 promise의 resolve()이므로 then 가능
            getName()
                .then((b) => console.log(`${a} and ${b}`));
        })
}
// 리턴값이 promise의 resolve()이므로 아래와 같이 작성 가능
// async function getProfile() {
//    let a = await getId(); 
//    let b = await getName(); // getId()가 처리되고 geName()이 처리된다.
//    console.log(`${a} and ${b}`);
// }

getProfile(); // 결과 : id and name

📍 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) }를 통해 그 메시지를 표시할 수 있다.