[ 모던 자바스크립트 Deep Dive ] 46장 : async/await

46.6 async/await

• 제너레이터를 사용해 비동기 처리를 동기 처리처럼 동작하도록 구현했지만 코드가 장황해지고 가독성도 나쁘다.
• ES8에서는 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다.
  • async/await는 프로미스를 기반으로 동작한다.
  • async/await를 사용하면 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

const fetch = require('node-fetch');

async function fetchTodo() {
	const url = 'https://~~~';
    
    const response = await fetch(url);
    const todo = await response.json();
    console.log(todo); 
};

fetchTodo();

46.6.1 async 함수

• await 키워드는 반드시 async 함수 내부에서 사용해야 한다.

// 함수 선언문
async function foo(n){
	return n;
}

// 함수 표현식
const bar = async function (n){
	return n;
}

// 화살표 함수
const bar = async (n) => {
	return n;
}

// 메서드
const obj = {
	async foo(n) return n;
}

// 제너레이터 클래스 메서드
class MyClass {
	async foo(n) return n;
}

46.6.2 await 키워드

• await 키워드는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다.

46.6.3 에러 처리

• async/await에서 에러 처리는 try catch 문을 사용할 수 있다.
• 콜백 함수를 인수로 전달받는 비동기 함수와는 달리 프로미스를 반환하는 비동기 함수는 명시적으로 호출할 수 있기 때문에 호출자가 명확하다.

const fetch = require('node-fetch');

const foo = async () => {
	try {
      const url = 'https://~~~';

      const response = await fetch(url);
      const data = await response.json();
      console.log(data); 
    }catch(err) {
      console.error(err); 
    }
};

fetchTodo();