async와 await란?

• 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법
• 기존 비동기 처리 방식인 콜백 함수, 프로미스의 단점을 보완해 개발자가 이해하기 쉬운 코드를 작성할 수 있게 해줌

async와 await가 적용된 코드와 그렇지 않은 코드

function logName() {
	let user = fetchUser('domain.com/users/1');
	if (user.id === 1) {
    	console.log(user.name);  
    }
} 

여기서 fetchUser()라고 하는 코드는 서버에서 데이터를 받아오는 HTTP 통신 코드라고 가정해보자. 위 코드에 async와 await를 사용하면 비동기적으로 처리되도록 코드의 실행 순서를 보장받을 수 있다.

그렇다면, 위 코드에 async와 await를 적용해보자.

async function logName() {
	let user = await fetchUser('domain.com/users/1');
	if (user.id === 1) {
    	console.log(user.name);  
    }
}

기본 문법

async function 함수명() {
	await 비동기_처리_메소드명();  
}

1. 실행할 함수 앞에 async라는 예약어를 붙인다.
2. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 메소드 앞에 await를 붙인다.

• 주의점: 비동기 처리 메소드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다. (???)

예제 1)

function fetchItems() {
	return new Promise((resolve, reject) => {
		let items = [1, 2, 3];
      	resolve(items)
    });
}

async function logItems() {
	let resultItems = await fetchItems();
  	console.log(resultItems); // [1, 2, 3]
}

여기서 fetchItems() 함수는 프로미스 객체(자바스크립트 비동기 처리를 위한 객체)를 반환하는 함수다. fetchItems() 함수를 실행하면 프로미스가 이행(resolve)되고 결과 값은 items 배열이 된다.

이제 logItems() 함수를 살펴보자.
logItems 함수 실행 시 fetchItems()의 결과값인 items 배열이 resultItems 변수에 담기고 콘솔에는 [1, 2, 3]이 출력된다. 만약 여기서 await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 promise의 .then()을 사용해야했겠지만, async await 문법을 사용하여 개발자가 더욱 읽기 쉽게 코드를 작성할 수 있다.

예제 2)

async와 await 문법을 가장 잘 활용할 수 있는 경우는 여러 개의 비동기 처리 코드를 다룰 때다.
아래 코드는 사용자와 할 일 목록을 받아오는 HTTP 통신 코드이다.

function fetchUser() {
	let url = 'https://jsonplaceholder.typicode.com/users/1'
    return fetch(url).then((response) => {
    	return response.json();  
    })
}

function fetchTodo() {
	let url = 'https://jsonplaceholder.typicode.com/todos/1'
    return fetch(url).then((response) => {
    	return response.json();  
    })	  
}

이 두 함수를 사용해 특정 사용자의 할 일 제목을 출력해보자.
코드는 다음과 같은 순서대로 작성하여 구현할 것이다.
1. fetchUser()를 이용해 사용자 정보 호출
2. 받아온 사용자의 아이디가 1이면 할 일 정보 호출
3. 받아온 할 일 정보의 제목을 콘솔에 출력

async function logTodoTitle() {
	let user = await fetchUser();
	if (user.id === 1) {
    	let todo = await fetchTodo();
      	console.log(todo.title);
    }
}

만약 위의 비동기 처리 코드를 콜백이나 프로미스로 구현했다면 코드의 길이와 가독성 측면 모두 좋지 않았을 것이다. 하지만 async await 문법을 사용하면 훨씬 이해하기 쉽고 가독성 좋은 코드를 구현할 수 있다.

참고 사이트

자바스크립트 async와 await