Front-end/JavaScript
[JavaScript] 비동기처리 ES6 async & await 문법
이안92
2021. 6. 21. 17:41
반응형
async & await
어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise, Callback의 단점을 해결하고 동기적(절차적)으로 코드를 작성할 수 있게 도와준다.
async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다.
자바스크립트 비동기 처리
function fetchData() {
var user = $.ajax('users/1');
console.log(user);
}
위와 같은 코드에서 ajax의 시간 지체로 다음 줄이 실행이 되지 않아 화면이 멈추거나 다른 동작을 할 수 없는 문제점 때문에 데이터를 받아왔을 때 코드를 실행할 수 있게 비동기 처리를 해줘야한다.
예전 비동기 처리 (callback)
function fetchData() {
$.ajax('users/1', function(user){
console.log(user);
$.ajax('users/2', ...)
});
console.log(user);
}
Promise도 콜백함수와 같이 랩핑을 해야되서 불편하다
fetchData().then().then().catch()
최신 비동기 처리 (async & await)
async function fetchData() {
var user = await $.ajax('users/1');
console.log(user);
}
반응형