[JavaScript][ES7] Async/await

o Async/Await - Promise 단점 보완

asyncFunction1()
	.then(function(result) {
		if (result === 'A') {
			return asyncSuccess()
		}
		return asyncFunction2()
	})
	.then(function() {
		return asyncFunction3()
	})
	.then(function() {
		return asyncFunction4()
	})
	.then(function() {
		return asyncFunction5()
			.catch(function(specificError) {
				console.log(specificError)
			})
	})
	.then(function() {
		return asyncFunction6()
	})
	.catch(function(error) {
		console.log(error)
	})

Promise 또한 잘못 사용하면 여전히 then이 깊어질 수 있고, if 문과 특정 에러 핸들링이 여전히 어렵다.

또한 코드가 then 체이닝에 갇혀야 하는 단점이 있었고, 이를 해결하기 위해 ES7 문법에 async/await 이 등장하게 되었다.

 

o async await의 기본 문법은 다음과 같다.

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

• 먼저 함수의 앞에 async 라는 예약어를 붙인다.
• 그리고나서, HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다.
  
  • 비동기 처리 메서드가 수행되어 프로미스 객체를 받아올 때까지 대기한다.
• 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await이 의도한 대로 동작한다.
  • 일반 메서드 앞에도 await을 붙일 순 있지만, 일반 메서드는 동기식으로 동작하므로 await을 붙인 의미가 없다
  • await 키워드는 반드시 async 함수 안에서만 동작한다. (일반 함수 안에서는 error!)

async function async1() { // 함수 앞에 async 키워드가 붙는다
	return 1
}

console.log(async1() instanceof Promise) // async 함수는 무조건 Promise 객체를 반환한다
const asyncReturn = async1()
asyncReturn.then() // 따라서 async 함수 호출 후에도 then을 사용할 수 있다

 

o 간단한 async await 예제

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

async function logItems() {
	var resultItems = await fetchItems();
	// await 키워드로 promise를 반환하는 함수의 실행 결과값을 변수에 담을 수 있다
	console.log(resultItems); // [1,2,3]
}

-> async/await 문법 덕분에 동기적으로 코드를 작성할 수 있게 되었다 !

( async/await를 사용하지 않았다면 데이터를 받아온 시점에 콜백 함수나 .then()등을 사용해야 했을 것 )

 

o 여러 개 비동기 처리 코드를 다루는 실용 예제

// fetchUser()와 fetchTodo() 함수는 각각 사용자 정보와 할 일 정보가 담긴 프로미스 객체를 반환

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) {	// 받아온 사용자 아이디가 1이면 todo 정보 호출
		var todo = await fetchTodo();
		console.log(todo.title);
	}
}