[JavaScript] 비동기처리 ES6 async & await 문법

 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);
}