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