async-await
: Javascript의 기존 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하며 보다 간단하게 비동기 처리를 할 수 있도록 하는 것
1. 기본 문법
: function 앞에 async 예약어를 붙이고, 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드(Promise객체) 앞에 await를 붙인다.
: 비동기 처리 메서드는 프로미스가 완료될 때까지 기다리며 반드시 프로미스 객체를 반환하므로, then() 메서드를 이용해 결괏값을 반환받을 수 있다.
async function 함수명() {
await 비동기_처리_메서드_명();
}
//예제
function fetchItems() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var items = [1,2,3];
resolve(items)
}, 3000);
});
}
async function logItems() {
var resultItems = await fetchItems();
console.log(resultItems); // [1,2,3]
}
2. 예외처리
: async - await의 예외 처리 방법은 try catch를 사용한다.
async function logItems() {
try{
var resultItems = await fetchItems();
console.log(resultItems); // [1,2,3]
}
catch(error){
console.log(error);
}
}
*참고자료
https://joshua1988.github.io/web-development/javascript/js-async-await/
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 이벤트 루프, 태스크 큐 (1) | 2023.02.25 |
---|---|
[JavaScript] Babel, Webpack, Polyfill이란? (0) | 2023.02.25 |
[JavaScript] Promise 객체 (0) | 2023.02.03 |
[JavaScript] 동기 처리, 비동기 처리, 콜백함수 (0) | 2023.01.09 |
[JavaScript] 구조 분해 할당(Destructuring assignment) (0) | 2023.01.08 |