async/await
Promis 로직을 더 쉽고 간결하게 사용할 수 있게 합니다.
유의해야 할 점은 async/await가 promise를 대체하기 위한 기능은 아닙니다.
내부적으로는 여전히 Promise를 사용해 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하기 편하게 보이는 문법만 다르게 해준 것입니다.
promise 객체 vs. async/await
promise 객체 사용
function delay(ms) {
return new Promise(resolve => {
setTimeout(() => {
console.log(`${ms} 밀리초가 지났습니다.`);
resolve()
}, ms);
});
}
function main() {
delay(1000)
.then(() => {
return delay(2000);
})
.then(() => {
return Promise.resolve('끝');
})
.then(result => {
console.log(result);
});
}
main();then method를 연속적으로 사용하여 비동기를 처리합니다.
async/await 사용
async function main() {
await delay(1000);
await delay(2000);
const result = await Promise.resolve('끝');
console.log(result);
}
main();await 키워드로 비동기 처리를 기다리고 있다는 것을 직관적으로 표현합니다.
장점
동기적 코드 작성
비동기적인 접근방식을 동기적으로 코드를 작성할 수 있게 해줍니다.
이로 인해 코드가 간결해지고 가독성을 높여져 유지 보수를 용이하게 해줍니다.
async 키워드
await키워드를 사용하기 위한 선언문입니다.
즉, function 앞에async키워드를 붙여줌으로써, 함수 내에서await키워드를 사용할 수 있습니다.
// 1️⃣
async function func1() {
const res = await fetch(url);
const data = await res.json();
}
func1();
// 2️⃣
const func2 = async () => {
const res = await fetch(url);
const data = await res.json();
}
func2();1️⃣ 함수 선언식
2️⃣ 함수 표현식
특징
async return = Promise 객체
위 그림과 같이 promise 객체 형태로 반환됨을 알 수 있습니다.
이를 통해 async function에서는 return 값은 무조건 promise 객체로 감싸져 반환됩니다.
await 키워드
promise.then()보다 세련되게 비동기 처리의 결과값을 얻을 수 있도록 해주는 문법입니다.
정의
await는 Promise 비동기 처리가 완료될 때까지 코드 실행을 일시 중시하고 wait한다는 뜻을 가집니다.
async function getData() { // 1️⃣
// 2️⃣
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
// 3️⃣
const data = await response.json();
console.log(data):
}1️⃣ async 함수
2️⃣
getData() async 함수 내에서 fetch() 비동기 함수를 호출합니다.
반환된 promise 객체를 await 키워드로 처리합니다.
이로 인해 함수 내 코드 실행이 일시 중지되고, fetch() 함수가 완료될 때까지 기다립니다.
서버로부터 리소스를 성공적으로 가져와 fetch() 함수가 완료됩니다.
3️⃣
그렇게 반환된 promise 객체를 다시 reponse.json() 함수를 호출해 await로 처리합니다.
다시 데이터를 가져오는 동안 코드 실행이 일시 중지됩니다.
데이터를 성공적으로 가져오면 최종 결과 값을 반환합니다.
➡️ await는 promise 객체를 처리하고 결과를 반환하는 비동기적인 작업을 동기적으로 처리할 수 있습니다.
then handler 방식 vs. await 방식
then handler 방식
fetch(url)
.then(res => res.json())
.then(data => {
console.log(data);
})await 방식
async function func() {
// 1️⃣
const res = await fetch(url);
const data = await res.json();
console.log(data);
}
func();1️⃣ await 키워드
비동기 함수 왼쪽에 await을 명시해 결과값을 변수에 받도록 코드를 정의해줍니다.
특징
- then과 콜백 함수를 남발하여 들여쓰기로 코드가 깊어지는 것을 방지합니다.
- 한 줄 레벨에서 코드를 나열하여 가독성을 높일 수 있습니다.
async/await 예외 처리
try-catch 문 사용
기존의 promise.then() 방식의 에러 처리는 catch() handler를 사용해 에러를 받았습니다.
async/await은 비동기 처리에 대한 에러를 처리할 필요가 생기면 일반적으로 에러를 처리하기 위해 사용한 try-catch문을 씌우면 됩니다.
// async/await 방식
async function func() {
try {
const res = await fetch(url);
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
func();async/await 병렬 처리
올바르지 않은 async/await 직렬 처리 예시
function getApple(){
return new Promise( (resolve, reject) => {
setTimeout(() => resolve("apple"), 1000);
})
}
function getBanana(){
return new Promise( (resolve, reject) => {
setTimeout(() => resolve("banana"), 1000);
})
}
async function getFruites(){
let a = await getApple();
let b = await getBanana();
console.log(`${a} and ${b}`);
}
getFruites();getApple()와 getBanana()는 비동기 함수이지만 서로 연관이 없습니다.
즉, 순서가 달라져도 문제가 없습니다.
하지만 await키워드를 붙여 두 과일을 가져오는데 동기적으로 실행이 되어 시간 낭비가 된 셈입니다.
적절한 async/await 병렬 처리 방법
Promise.all method
async function getFruites(){
console.time();
// 1️⃣
let [ a, b ] = await Promise.all([getApple(), getBanana()]);
console.log(`${a} and ${b}`);
console.timeEnd();
}
getFruites();1️⃣
Promise.all()은 배열 인자의 각 promise 비동기 함수들이 모두 resolve가 되어야 결과를 반환받습니다.
각각의 promise 함수들이 제각각 비동기 논블록킹으로 실행되어 시간을 단축할 수 있습니다.
반환 값은 각 promise 함수의 반환값들이 배열로 담깁니다.
적절한 비동기 처리
복잡하지 않고 비교적 심플한 비동기 작업을 처리할 때
callback 함수를 사용하면 오히려 promise 방식보다 더 좋을 수 있습니다.
비교적 복잡한 비동기 작업을 처리할 때
promise 객체, async/await을 사용하여 코드를 보다 간결하게 작성합니다.
참고
📚 자바스크립트 Async/Await 개념 & 문법 정복
🌐 자바스크립트의 핵심 '비동기' 완벽 이해 ❗
