[북털] async & await, Promise와 차이

자바스크립트에서는 비동기 처리를 다룰 수 있는 방법이 여러 가지가 있다.

Callback, Promise, async/awiat 이다.

 

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

 

 

async & await 기본 문법

하지만 async/await 를 사용하기 위해서는 선행되어야 하는 조건이 있는데, await 는 async 함수 안에서만 동작한다.

함수 앞에 asyncs 라는 예약어를 붙인다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다. 

* 주의해야할 점은 비동기 처리 메서드가 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.

일반적으로 awiat의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수이다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

 

Promise와의 차이점

promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다.

내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 된다.

callback과 promise의 단점은 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 것인데 콜백지옥, then() 지옥이라고 부른다.

이러한 단점을 해소하고자 나온 것이 async/await이다.

 

 

 

 

참고블로그:

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await