async/await 활용해보기

async란 무엇인가?

함수 앞에  async라는 명령어를 붙이면 비동기 함수를 정의할 수 있습니다. fetch api에 대해서 알아볼 때 프로미스를 언급한 적이 있습니다. 프로미스는 비동기처리에 활용되는 객체라고 했었죠. 비동기 함수(async를 붙인 함수)는 프로미스를 반환합니다.

간단히 프로미스를 반환하는 함수라고 생각하시면 됩니다.

async는 어디에 붙일까?

function이 들어가는 부분 앞 자리에 붙이면 됩니다.

async function a(){};
let a = async function(){};
let a = async () => {};

익명, 기명, 화살표 함수 모두 function이 들어가는 자리 앞에 async라는 명령어를 입력했습니다.

비동기 함수의 특징

비동기 함수의 특징은 앞 부분에서 설명한 것처럼 프로미스를 반환한다는 것입니다.

function sum(a,b){
    return a+b;
}
console.log(sum(1, 2)) //일반함수의 경우 3이 리턴됨

async function a_sum(a, b){
    return a+b;
}
console.log(a_sum(1, 2))//Promise가 리턴됨 

즉 위의 코드에서도 알 수 있듯이 우리가 프로미스를 리턴하면 그대로 리턴되고, 프로미스가 아닌 값을 리턴하면 자동으로 프로미스로 감싼 다음 리턴되는 것입니다.

비동기 함수의 또 다른 특징인 await

await의 사전적 의미는 "(을) 기다리다"입니다. async 함수 내에서는 await라는 명령어를 사용할 수 있습니다. await를 사용하면 프로미스의 결과가 나올 때 까지 기다려준 뒤 다음 코드를 실행합니다. 

영화 평점에 따라 순위를 주는 api입니다.

영화 평점 순위 보러가기

링크를 클릭하면 똑같은 화면을 확인할 수 있습니다. 예시로 해당 json 파일을 받아와보도록 하겠습니다.

async function movie(){
  const movies = fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating').then(res => res.json())

  console.log(movies);
}

movie();

해당 코드를 실행하면 어떻게 될까요? undefined 값이 담긴 프로미스가 콘솔에 나타납니다.

콘솔창을 확인하시면Promise{: undefined}라고 적혀 있는 것을 볼 수 있습니다.

왜 이런 값이 나왔을까요? fetch를 통해 json 값을 가져오고 있는 도중에 그 다음 console.log 함수가 실행되기 때문에 undefined라는 값이 나오는 것입니다. 

async function movie(){
  const movies = await fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating').then(res => res.json())

  console.log(movies);
}

movie();

await를 써준다면 프로미스의 결과를 기다리기 때문에 json으로 변환된 값을 콘솔창에서 확인할 수 있습니다.

성공적으로 json을 받은 것을 확인할 수 있습니다.

await는 꼭 async 함수 내부에서 사용하세요. 그러지 않으면 에러가 납니다. 

공감은 제작자에게 큰 힘이 됩니다.