9/21[TIL]Async & Await

동기와 비동기의 차이는 어떠한 작업을 수행할 때까지 다음 작업을 이행하는지 기다려야 하는지로 구별할 수 있다. 동기의 같은 경우 어떠한 작업이 완료될 때까지 다음 작업을 시행하지 않고 기다리고 진행하는 방법이며 비동기는 어떤 작업이 진행되고 있더라도 상관없이 다음 작업을 진행하는 것으로 보면 된다.

 

실생활에서는 비동기가 훨씬 유용하게 많이 쓰이는 것을 볼 수 있다. 인터넷에서의 요청, 큰 용량의 파일을 로딩하는 것 등등...

 

이처럼 비동기는 랜덤하게 진행하게 되는데 이를 순차적으로 우리가 원하는 대로 지정해 줄 수 있는 방법은 없을까?

 

이러한 것들을 실현해줄 수 있는 것에는 callback 함수가 있다. 하지만 callback 함수가 처리해야 할 데이터가 많아 지면 가독성이 힘들어질뿐만 아니라 (for문 지옥(?)처럼) 처리하기에도 힘든 부분이 많다. 그리고 제일 힘든 에러핸들링의 어려움까지.. 이른바 callback hell을 탈출할 수 있는 방법에는 Promise를 사용하는 방법이 있다. 첫 테스크가 끝나고 다음 테스크를 resolve()다음 액션. then(이행)을 이용하여 진행할 수 있고, 에러 처리가 되는 경우에는 reject()에러핸들링. catch(거절)를 사용하여 마지막에서 체이닝을 진행한다.

단, Promise를 사용할 때. then 후에 return을 사용하여 다음 동작을 꼭 입력해주어야 한다. 그러지 않는다면 앞서 callback hell처럼 Promise hell에 빠지게 된다.

 

Promise의 세 가지 상태

 

1. pending (아직 수립이나 에러가 나기 전의 대기 상태)

2. fullfilled (비동기 요청이 성공적으로 완료 됬을 때)

3. rejected(비동기 요청 중 에러가 생겼을 때)

 

참조 : https://mdn.mozillademos.org/files/8633/promises.png

 

앞서 말한 두 가지의 비동기 처리 방식인 callback 과 Promise 말고도 비동기처리 방식이 존재하는데 ES8(ECMAScript2017)의 공식 스펙(링크)으로 비교적 최근에 정의된 문법인 async와 await이다.

 

Async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이라고 한다. 기존의 비동기 처리 방식인 callback, Promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

 

Async await 비동기함수들을 마치 동기적인 프로그램인 것처럼 사용할 수 있게 해 주며 이는 쉽게 말해 순차적으로 실행됨 표현을 동기적으로 사용 가능하다고 이해하면 될 것 같다.