Async Await

Async와 await는 promise를 좀더 보기좋게 바꿔놓은 문법이다. 이전 fetch를 사용하면서 딜레이가 걸리는 함수를 JS가 다른 작업공간으로 옮겨서 작업한다고 하였다. 그리고 그 사이 다른 빠르게 진행할 수 있는 코드를 먼저 진행하고 딜레이 걸렸던 함수의 값을 반환한다고 하고 이걸 JS의 비동기 작업 방식이라 했다.

JS가 작업 처리하면서 fetch를 기다리다가 연속적인 다른 작업을 하기 원했다면 반환값을 promise로 받고 then이나 catch등 promise함수를 이용하여 연속적인 작업을 진행하였다.

하지만 결과적으로 보면 JS문서 안에서 다른 코드와 promise를 동기적으로 실행하지 못하였다. 이젠 async/await를 사용함으로서 JS코드와 동기적으로 실행할 수 있게 만들 수 있다.

<aside> 📝 async and await declraration

const doWork = async() ⇒ {}

async fucntion (){}

const doWorkAsync = async() ⇒ {
	const response = await fetch("URL");
}

async doWorkAsync() {
	const response = await fetch("URL");
}

</aside>

비동기적으로 실행하는 함수를 절차적으로 사용하기위해서는 비동기 함수앞에 await라는 키워드를 추가한다. 또한 await를 사용하기위해 비동기함수를 호출하는 함수를 async로 선언해야 한다.

/**
 * 지금까지 보았던 promise를 async로 변경하여 사용하는 것을
 * 비교하면 몰라보게 가독성이 더욱 좋아지고 무엇보다 비동기적
 * 소스를 동기적 코드와 같이 절차적(await)으로 실행할 수 
 * 있게 구현할 수 있다.
 */
const getMoviesPromise = () => {
  fetch("<https://yts.mx/api/v2/list_movies.json>")
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .then((json) => console.log(json))
    .catch((err) => console.log(`❌ ${err}`));
};

const getMoviesAsync = async () => {
  const response = await fetch("<https://yts.mx/api/v2/list_movies.json>");
  const json = await response.json();
  console.log(json);
};

getMoviesAsync();

Promise와 다르게 코드가 간결해졌고 더욱 알아보기 쉬워진걸 확인할 수 있다.

try catch finally

Promise의 catch와 finally를 사용하기위해서 try이라는 키워드를 사용하게된다. 각 키워드는 scope를 지정하여 동작할 소스를 정의하여 promise를 대체하게 된다.

<aside> 📝 Try, catch, finally declaration

try {} catch {} finally {}

const doWork= async () => {
  try {
    throw Error("Im hungry");
  } catch (err) {
    console.log(`❌ ${err}`);
  } finally {
    console.log("We are done!");
  }
};

getMoviesAsync();

</aside>

Async/Await처럼 try를 사용함으로 더욱 가독성 있고 깔끔한 코드를 구현할 수 있게 된다.

/**
 * async/await말고도 promise와 함께 사용했었던 catch와
 * finally를 아래와 같이 사용할 수 있다. catch는 try구문
 * 안에 들어가 있는 모든 소스에서 에러가 발생했을때 발생한
 * 에러 인자를 catch로 전달하여 예외를 처리할 수 있게 한다.
 * 또한 try와 catch다음으로 동작하는 finally로 미자막으로
 * 꼭 실행해야하는 소스코드를 추가함으로서 promise가 사용
 * 했었던 모든 기능을 구현할 수 있다.
 */
const getMoviesAsync = async () => {
  try {
    const response = await fetch("<https://yts.mx/api/v2/list_movies.json>");
    const json = await response.json();
    throw Error("Im hungry");
  } catch (err) {
    console.log(`❌ ${err}`);
  } finally {
    console.log("We are done!");
  }
};

getMoviesAsync();

Parallel Async Await