async / await?? 기다려? 뭔데??
1. async & await란?
- Javascript의 비동기 처리 패턴 중 가장 최근에 나온 문법이라고 한다. 기존의 처리 방식인 callback과 promise의 단점을 보완하고 읽기 좋은 코드를 작성하게 도와 준다고 한다.
- 이 문법의 목적은 위에서부터 아래로 한 줄 한 줄 사고하면서 프로그래밍 하는거라고 한다.
2. async & await 문법
async function 함수명() {
await 비동기_처리_메서드_명();
}
- 기본 문법
function logName() {
var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
}
async function logName() {
var user = await fetchUser('domain.com/users/1');
if (user.id === 1) {
console.log(user.name);
}
}
- 1번째 코드에 async 과 await를 적용한 코드가 2번째 예이다. 보기에도 뭔가 되게 간단해 보인다.
2 - 1 예제 )
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() 함수는 프로미스 객체를 반환하는 함수이다. fetchItems() 함수를 실행하면 프로미스가 이행되어, resolve값은 items 배열이 된다.
- logItems()함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담긴다. 따라서, 콘솔에 [1,2,3]이 출력된다.
// HTTP 통신 동작을 모방한 코드
function fetchItems() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var items = [1,2,3];
resolve(items)
}, 3000);
});
}
// jQuery ajax 코드
function fetchItems() {
return new Promise(function(resolve, reject) {
$.ajax('domain.com/items', function(response) {
resolve(response);
});
});
}
- 위 예제는 다시 읽어보면서 이해해 보자!
3. 예외 처리
- 프로미스에서 에러 처리를 위해 .catch()를 사용한 것처럼 async에서는 catch{}를 사용 한다.
async function logTodoTitle() {
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);
}
}
- 코드 실행을 하다가 발생한 네트워크 통신 오류 뿐만 아니라 간단한 타입 오류들의 일반적인 오류까지도 catch로 잡아낼 수 있다. 프로미스와 비슷하게 여기서도 catch{}를 통해 처리하면 된다.
- 말 그대로, try => 함수를 실행한다~~, 그리고 에러는 catch를 통해 나타 낸다.
마무리
=> 1. 물론 이해하는데 어렵다...
=> 2. 프로미스의 개념과 비슷하다. 너무 어렵다는 선입견을 갖지 말고 접근을 해보자!
=> 3. 비동기 처리, 콜백 함수, 프로미스와 다 연관이 있는 개념이므로 한 묶음으로 공부하자!!
Author And Source
이 문제에 관하여(async / await?? 기다려? 뭔데??), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ko1586/async-await-기다려-뭔데저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)