자바스크립트 async & await

async, await 는 무엇인가??

비동기 처리 방식인 callback, promise의 단점을 보완하고 가독성을 상승시킨 기능이다.
최근에 나온 패턴으로 알아두면 좋다.

async 함수

async 함수에서 async는 function앞에 위치할 수 있으며, 반드시 promise형으로 반환한다.
명시적으로 Promise를 붙여 반환할수도 있지만 결과는 같다.

async function f() {
 // return 1;
  return Promise.resolve(1);
}
 
f().then(alert); // result가 1인 promise로 반환됨 그래서 then에서 alert 호출시 1출력

await

자바스크립트에서 await는 async함수 안에서만 동작한다. 
async함수가 아닌데 await를 사용하면 에러가 난다.
await 를 사용하면 promise가 처리될 때까지 기다린다.

async function f() {
      let promise = new Promise(function(resolve, reject) {        setTimeout(() => resolve("완료!"), 2000);      }
      );
      let result = await promise; // promise가 수행될 때 까지 기다림
      console.log(result); // promise가 수행된 후 result가 나타난 뒤에 "완료!"
      console.log("end"); // promise가 수행된 후 result가 나타난 뒤에 "완료!"
}
f();

await를 사용한 경우

await를 사용하지 않은 경우

await를 사용했을때와 await를 뺐을 경우 차이가 확연하다.
await를 뺐을 경우 promise는 pending(대기) 형태로 출력된다.

그럼 async와 await를 어떤 부분에서 이용하면 좋은가??

외부 서버에서 데이터를 불러오는 메소드를 만들어서, 리턴할 때 사용하면 매우 편리할거라 생각한다.

 

해깔리는 부분이 있는데, ajax에서도 async라는 속성이 사용된다.

ajax에서 async의 기능은 비동기식으로 처리할지 동기식으로 처리할지 지정할 수 있게 해주는것이다.

// 동기식 방식으로 지원 (코드의 순서대로 진행)
$.ajax({
      type: 'POST',
      url: 'https://teck10.tistory.com/181',
      async: false, 
    .......
});
 
// 비동기식 방식으로 지원 (코드의 실행중에 실행)
$.ajax({
      type: 'POST',
      url: 'https://teck10.tistory.com/181',
      async: true, 
    .......
});