async/await을 사용한 비동기 처리
async / await을 사용한 비동기 처리 방식은 비동기 처리 패턴 중 가장 최근에 나온 문법이다.
기존의 callback함수와 promise의 단점을 보완하고 가독성을 높였다.
오늘은 async / await을 사용한 비동기 처리 방식에 대해 정리해보려고 한다.
1. async / await 사용법
const func_name = async() {
await axios.get('URL');
}
또는
async function func_name() {
await axios.get('URL);
}함수 앞에 async라는 예약어를 붙여주고 비동기 처리 부분에 await를 붙여준다.
주의해야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.
2. 간단한 예제
function fetchItems() {
return new Promise(function(resolve, reject) {
var items = [1,2,3];
resolve(items)
});
}
async function logItems() {
var resultItems = await fetchItems();
console.log(resultItems); // [1,2,3]
}
// fetchItems()가 호출되고 resolve(items)를 만나 [1,2,3] 이 리턴된다.
// await이 없었다면 아래와 같았을 것이다.
fetchItems()
.then((res) => console.log(res)3. 실용 예제
async / await는 여러개의 비동기 처리를 할 때 가독성과 편리함을 제공한다.
const fetchUser = () => {
var url = 'https://jsonplaceholder.typicode.com/users/1'
return fetch(url).then((response) => {
return response.json();
});
}
const fetchTodo = () => {
var url = 'https://jsonplaceholder.typicode.com/todos/1';
return fetch(url).then((response) => {
return response.json();
});
}
const logTodoTitle = async () => {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title); // delectus aut autem
}
}callback 함수나 Promise를 사용했다면 코드가 더 길어졌을 것이다.
4. 예외처리
try & catch 를 사용해 예외처리를 할 수 있다.
const logTodoTitle = async () => {
try {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title); // delectus aut autem
}
} catch (error) {
console.log(error);
}
}
