개요
- JavaScript 비동기 처리 패턴 중 가장 최근에 나온 문법 체계이다.
- CallBack 함수, Promise 의 단점을 개선하고 클린 코드를 작성할 수 있게 해준다.
클린코드
- 스스로 생각하기에 클린코드를 짜는 개발자가 정말 대단한 개발자라고 생각하고는 한다.
- 읽은 그대로, 이해한 그대로 코드를 구성하는 것이 async & await 문법의 탄생 목적이다.
var user = {
id: 1,
name: 'Josh'
};
if (user.id === 1) {
console.log(user.name); // Josh
}
// HTTP 통신 코드 라고 가정하였을 시 해당 코드가 async & await 문법 적용 형태이다.
var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
기초
- async , await 는 키워드 이다.
- 기존의 JS 에서의 비동기 방식 관점에서 벗어난 기본적 사고를 요구한다.
// 비동기적으로 메서드를 호출하겠다는 의미인 듯
async function logName() {
// 아마도 Response 가 올 때까지 대기하라는 키워드인 듯
var user = await fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
}
function logName() {
var user = fetchUser('domain.com/users/1', function(user) {
// 기존의 HTTP CallBack 이라면 CallBack 함수를 호출하여 후속 작업을 진행한다.
if (user.id === 1) {
console.log(user.name);
}
});
}
문법
- async 키워드는 await 키워드가 붙은 함수를 가지고 있는 함수 앞에 기재 된다.
- await 키워드는 비동기 처리 메서드 앞에 기재한다.
- await 가 붙은 비동기 처리 메서드는 반드시 Promise 를 리턴해야한다.
- 보통 await 키워드가 붙은 비동기 처리 메서드는 Axios 같은 Promise 반환 함수 API 이다.
async function name() {
await asyncFnc();
};
기초 예제
function fetchItems() {
return new Promise( (resolve, reject) => {
const items = [1,2,3];
resolve(items);
});
}
async function logItems() {
const resultItems = await fetchItems();
console.log(resultItems);
}
async & await 의 실용 예제
- 글을 읽고 직접 짜본 함수는 밑과 같다.
- await 는 Promise 를 리턴하는데, await 가 걸리면 then() 이 생략된다.
- 디스트럭쳐링 으로 id 를 빼와 로깅한다.
function fetchUser() {
const url = 'https://jsonplaceholder.typicode.com/users/1'
return fetch(url).then((response) => {
return response.json();
});
}
function fetchTodo() {
const url = 'https://jsonplaceholder.typicode.com/todos/1';
return fetch(url).then((response) => {
return response.json();
});
}
//fetchUser() 로 사용자 정보를 호출
//아이디가 1이면 할일 정보 호출
//받아온 할 일 정보의 제목을 출력
async function quiz() {
const req = await fetchUser();
const {id} = req;
if(id === 1) {
console.log(req);
}
}
async & await 의 예외처리
- async->await 에서 예외처리는 Java 에서 제공하던 try-catch 문이다.
- catch 문에 error 객체가 담겨져 오기 때문에 후속 처리에 적합하다.
async function logTodoTitle() {
try{
const user = await fetchUser();
const {id} = user;
if(id === 1){
const todo = await fetchTodo();
console.log(todo.title);
}
}catch(error) {
console.log(error);
}
}
참고
joshua1988.github.io/web-development/javascript/js-async-await/
'Vue.js > Vue + ES6' 카테고리의 다른 글
Promise (0) | 2020.12.18 |
---|---|
JavaScript 의 비동기 처리 (0) | 2020.12.18 |
ES6 (0) | 2020.12.18 |