[ES6] Async and Await

이번 포스팅에서는 async 와 await 에 대해서 알아보도록 하겠습니다.

이를 제대로 이해하기 위해서는 저번 포스팅을 먼저 이해해야 합니다.

https://ssungkang.tistory.com/entry/ES6-Promises-then-catch-all-race-finally

[ES6] Promises - then, catch, all, race, finally

왜냐면 이들을 Promise 의 업데이트한 것이기 때문입니다.

업데이트를 한 이유는 간단합니다.

기존에는 복잡해질수록 then 을 여러 번 사용해주어야하고 가독성을 해칠 우려가 있었습니다.

때문에 보다 좋은 코드를 위해서 등장한 것이죠.

 

Async and Await

우선 저번 시간에 사용했던 코드입니다.

영화 목록 API 를 통해 목록을 조회하는데 response.json() 을 통해 바로 데이터에 접근할려고 하자 내부에 Promise 가 또 존재해서 then 을 한 번 더 사용해주었습니다.

그 결과 성공적으로 데이터를 가져올 수 있었죠.

const movieListPromise = () => {
  fetch("https://yts.lt/api/v2/list_movies.json")
    .then(response => response.json())
    .then(json => console.log(json))
};

 

이를 async 와 await 를 통해 구현해봅시다.

우선 async 의 사용 방법은 아래와 같습니다.

// 일반 함수
async function myFunc(){

}

// arrow 함수
myFunc = async() => {
  
}

 

다음으로 await 는 항상 async 로 정의된 함수 내에서만 사용이 가능합니다.

이는 then 과 유사한 역할로 promise 가 끝나기를 기다려줍니다.

await 를 사용하기 전에는 pending 에 막혔습니다.

movieListAsync = async() => {
  const response = fetch("https://yts.lt/api/v2/list_movies.json");
  console.log(response);
}

movieListAsync();
// Promise {<pending>}

 

await 를 사용하자 promise 가 끝나기를 기다려 원하는 결과값을 얻을 수 있었습니다.

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

movieListAsync();
// Response {type: "cors", url: "https://yts.lt/api/v2/list_movies.json", redirected: false, status: 200, ok: true, …}

 

위에서 then 을 두 번 사용했듯이 이번에는 await 를 두 번 사용하여 promise 와 then 을 사용한 코드와 같은 결과를 얻을 수 있도록 해보겠습니다.

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

 

Try and Catch, Finally

await 를 통해 then 을 대체해보았습니다.

이번에는 async 방식으로 catch 를 대체해보도록 하겠습니다.

이를 대체하는 것은 try 와 catch 입니다.

python 을 해보셨다면 이미 익숙하실 겁니다.

 

실행할 코드들을 try 로 감싸주고 그 뒤에 catch 는 에러메세지를 인자로 받습니다.

try 내부라면 어디서 에러가 일어나도 catch 가 이를 전부 처리합니다.

movieListAsync = async () => {
  try {
    const response = await fetch("https://yts.lt/api/v2/list_movies.json");
    const json = await response.json();
    console.log(json);
  } catch(e){
    console.log(e);
  }
};

 

finally 를 사용하는 것 역시 위와 비슷하고 아주 간단합니다.

catch 뒤에 비슷한 방식으로 위치해주면 됩니다.

movieListAsync = async () => {
  try {
    const response = await fetch("https://yts.lt/api/v2/list_movies.json");
    const json = await response.json();
    console.log(json);
  } catch(e){
    console.log(e);
  } finally {
    console.log("finally");
  }
};

 

Parallel

지금까지 배운 내용들을 토대로 Parallel 하게 두 API 에 접근해야 한다고 생각해봅시다.

all 을 통해서 fetch 두 개를 받고 다시 all 을 한 번 더 사용하여 json 형식으로 바꿔줍니다.

나머지 부분에 대해서는 위와 동일합니다.

movieListAsync = async () => {
  try {
    const [moviesResponse, suggestionsResponse] = await Promise.all([
      fetch("https://yts.lt/api/v2/list_movies.json"),
      fetch("https://yts.lt/api/v2/movie_suggestions.json?movie_id=100")
    ]);

    const [movies, suggestions] = await Promise.all([moviesResponse.json(), suggestionsResponse.json()]);
    
    console.log(movies, suggestions);
  } catch(e){
    console.log(e);
  } finally {
    console.log("finally");
  }
};