async / await

✅ async / await 란?

async / await는 간단하고 가독성 좋게 비동기 처리를 동작하도록 구현할 수 있고 프로미스를 기반으로 동작한다.

async / await를 사용하면 then / catch / finally 와 같은 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

✍️ 기본문법

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

async / await이 적용된 코드 만들기 1️⃣

//동기 처리 코드

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

fetchUser() 라고 하는 코드는 서버에서 데이터를 받아오는 통신 코드라고 가정한다.

//콜백함수를 이용한 비동기 처리 코드

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

//async & await이 적용된 코드

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

async / await이 적용된 코드 만들기 2️⃣

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

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

fetchItems() 는 프로미스 객체를 반환하는 함수이다. 함수를 실행하면 프로미스가 이행되며 결과 값은 items의 배열이 된다.

logItems() 함수를 실행하면 fetchItems() 의 결과 값인 items의 배열이 resultItems에 담긴다.

await을 사용하지 않았다면 데이터를 받아 온 시점에 콘솔을 출력할 수 있게 콜백함수나 .then()을 사용했어야 한다.

async / await이 적용된 코드 만들기 3️⃣

async / await 은 여러개의 비동기 처리 코드를 다룰 때 빛을 발한다.

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

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

위 함수들은 각각 사용자 정보와 할 일 정보가 담긴 데이터를 반환한다.

이 두 함수를 사용해서 할일과 제목을 콘솔에 출력해보는 코드는 아래와 같다.

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}

이렇게 코드를 작성하면 가독성도 좋고 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생긴다.

---

🤬 에러 처리

async / await 은 try...catch 문을 사용하여 에러처리를 할 수 있다.

const fetch = require('node-fetch')

const foo = async () => {
	try{
		const wrongURL = 'http:// ~ '	
		
		const response = await fetch(wrongURL);
		const data = await response.json();
		console.log(data);
} catch (err) {
	console.log(err);
	}
}

foo();

---

참고 : 캡틴판교 / 자바스크립트 딥다이브