async/await
async/await는 자바스크립트 비동기 처리 패턴 중 가장 최근에 나온 문법이다.(ES8)
콜백 함수와 프로미스의 단점을 보완하고 가독성이 좋은 코드를 작성할 수 있다.
async
async는 function 앞에 위치한다.
async function f() {
return 1;
}function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환하고, 프로미스가 아닌 것은 프라미스로 감싸 반환한다.
await
await는 async 함수 안에서만 동작한다.
let value = await promise;자바스크립트는 await 키워드를 만나게되면 프로미스가 처리될 때까지 기다린 후 결과를 반환한다. 프로미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
async/await 장점
이전 포스팅에서 알아본거처럼 자바스크립트에서 비동기 처리를 한다면 아래와 같이 작성 할 수 있다.
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData()); // undefined하지만 이 코드에서는 결과값이 undefined로 출력되는데 그 이유는 데이터를 요청하고 받아올 때 까지 기다려주지 않고 다음 코드를 실행해버리기 때문이다.
그래서 해당 문제점을 해결하기 위해 아래 코드와 같이 콜백 함수를 사용해왔다.
function getData(callbackFunc) {
$.get('https://domain.com/products/1', function(response) {
callbackFunc(response);
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});하지만 콜백 함수를 활용한 비동기 처리에도 단점이 있는데, 처리해야할 비동기 처리가 많아지면 콜백 지옥이 발생한다는 것이였다. 콜백 지옥은 코드 가독성과 유지보수에서 이점이 없기 때문에 Promise나 async를 사용해서 비동기 처리를 한다.
그 중 오늘 포스팅하는 async/await의 장점은 콜백 함수, 프로미스와 비교하며 느낄 수 있다.
첫번째로는 콜백 함수를 사용하지 않고도 await을 활용하여 데이터를 기다렸다 받을 수 있다는 점이다.
두번째로는 프로미스에서 response.json()를 활용하면 JSON형식의 프로미스를 반환받게 되어 한번 더 .then을 사용하게되는데 await response.json()를 활용하면 데이터를 받을때까지 기다린 후 실행되기에 코드가 간결해지게 된다.
async/await 기본 문법
async function 함수명() {
await 비동기_처리_메서드_명();
}함수 앞에 async라는 예약어를 붙이고, 함수 내부의 로직 중 비동기 처리 코드 앞에 await를 붙인다.
async/await 에러 핸들링
async function f() {
try {
let response = await fetch('http://유효하지-않은-주소');
let user = await response.json();
} catch(err) {
// fetch와 response.json에서 발행한 에러 모두를 여기서 잡습니다.
alert(err);
}
}
f();async/await는 try..catch를 활용하여 에러 핸들링을 한다.
References
