2020.02.11 Javascript ES6 비동기처리와 async&await

 

async&await

자바스크립트의 비동기 처리방식(콜백함수,Promise)보다 더 최신으로 나온 기술이다.

바로 예제를 보여주는게 이해하는데 더 빠를것 같아서 바로 예제를 보여주려고 한다.

getData는 new Promise를 사용하여 Promise 객체를 반환한다.

그리고 이 함수를 실행시키기 위해 작성된 밑의 코드는 async와 await가 사용되었다.

await 다음에 .then을 사용하였는데 이 점이 조금 특이하다.

왜 Promise에서 사용하던 .then을 사용할까?

바로 async/await는 Promise를 반환하기 때문이다.

Promise의 대체로 나온 문법이 async/await지만 서로같이 섞어 사용해도 상관없다.

Code

결과

 

async와 await에 대해서 설명을 좀 하려고 한다.

async는 await를 사용하기 위해 쓰이는 선언용이다.

정말 핵심기능은 await가 가지고 있다.

await를 적은 함수는 그 수가 여러개여도 await 때문에 적힌 순서대로 실행된다.

즉, 콜백함수를 사용하지 않아도 비동기 처리를 순서대로 정말 쉽게 사용할수있는것이다.

하지만 항상 반환되는 객체가 Promise타입이어야 한다는 점이 단점이라면 단점일수 있다.

 

그럼 이제 Promise와 마찬가지로 finally를 붙여보자.

 

코드

결과

결과를 보면 try,catch 다음에 finally를 줘서 실행을 해줬더니 무조건 실행되는 함수라고 출력문이 나왔다.

Promise에서도 설명했지만 finally가 없는경우 무조건 실행되는 함수를 try에도 catch에도 넣어줘야하는 고생을 해야한다

하지만 finally가 있는경우 finally에 한번만 넣으면 어차피 try이건 catch건 무조건 실행되므로 상황에 맞게 적절히 사용하면 될것같다.

 

콜백함수 부터 async&await 까지 비동기처리 방식에 대해서 알아봤다. 자바스크립트는 싱글 스레드 언어에 속하기 때문에 비동기 처리방식이 필수다. 그러므로 꼭 알아둬야 할것같다.