async 와 await 이란?

mdn docs 에서는 아래와 같이 정의했다.

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.

즉, 비동기 함수 처리를 위해 사용된다.

왜 사용하나요?

• 먼저, async/await 외에 대표적인 비동기식 처리방식에는 setTimeout 이나, promise 등이 있는데,
• async/await 는 기존의 처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하여 많이 사용된다.

async/await 함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다!

• async/await 를 사용하면 자바스크립트는 프라미스가 처리될때 까지 대기한다.
  그리고 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어진다.
  • 에러가 발생하지 않았을 경우
    • 프라미스 객체의 result 값 반환
  • 에러가 발생한 겨웅
    • 예외가 생성된다. 이는 try/catch 로 처리할 수 있다.

사용 방법

- async

    async function name([param[, param[, ... param]]]) {
        statements
    }

• 사용할 함수 제일 앞에 async 를 작성한다.
• 그리고 promise 객체 앞에 await 을 붙여준다.

- await

let value = await promise;

• await 을 사용하려면 꼭 async 가 존재해야한다. 그렇지 않으면 SyntaxError 가 발생한다.

async function userInfo() {
	  let response = await fetch('/user/...');
      let user = await response.json();

이제 기존의 Promise 코드와 async 를 적용한 코드를 비교해보자.

Promise 코드

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

thenPromise().then((n) => console.log(n)); // 출력결과: 1

async 코드

async function thenAsync() {
	return 1
}

thenAsync().then((n) => console.log(n)); // 출력결과: 1

// 위는 아래와 같이 이어 적어도된다.

async function thenAsync() {
	return 'wow!'
}.then((n) => console.log(n));

• 위의 두 예시를 보았을 때, 확실히 async 코드가 더 직관적이고 보기 좋다.
• 함수 앞에 async 를 사용하면 항상 promise를 반환하는 함수가 되고,
  return 값은 resolve() 값과 동일하다.

예외처리 방법(에러 핸들링)

• 기존 promise 에서는 reject 를 사용해 에러를 처리했는데,
  await 에서 발생한 에서는 try/catch 를 사용하거나 then/catch 를 이용하면 된다.

async function f() {
	throw new Error("에러 났다!");
    // await Promise.reject(new Error("에러났다!));
}

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

또는

async function f() {
	try {
    	let response = await fetch("http:// 올바르지 않은 주소..');
        let user = await response.json();
    } catch(err) {
    	// fetch 와 response.json 에서 발생한 모든 에러는 여기서 잡힌다.
        console.log(err, "에러났다!");
    }
}

f();

• 만약, try/catch 가 없을 경우 프라미스 거부 상태가 된다. ( TypeError: failed to fetch 에러 발생) 따라 .catch 를 추가해 거부된 프라미스를 처리하면 된다.

• 추가로, 문법의 제약 때문에 async 함수는 최상위 레벨 코드에서는 await 을 사용할 수 없다.

---

참고자료_1
참고자료_2
참고자료_3