async와 await은 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.
Promise를 이용한 비동기 처리 방법은 다음과 같다.
function promise() {
return new Promise((resolve, reject) => {
resolve('success');
})
}
promise().then(result => console.log(result));
이를 쉽게 만들 수 있는 방법이 async 이다.
async function promise() {
return 'success'
}
promise().then(result => console.log(result));
함수 앞에 async만 붙여주면, 그 함수는 프로미스 객체를 리턴한다.
await은 async 함수 안에서만 동작한다.
await 키워드를 만나면 프로미스가 처리될 때까지 기다린다.
async function delay() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('success'), 2000)
})
const result = await promise;
console.log(result);
}
async, await은 try, catch 문을 이용하여 에러 처리를 할 수 있다.
async function f() {
try {
let response = await fetch('http:....');
let user = await response.json();
} catch(err) {
alert(err);
}
}
f();