async , await

박선우·2022년 8월 13일
0

javascript

목록 보기
2/2
post-thumbnail
  • async, await

async, await을 이해하기 위한 이벤트루프, Promise, async와 await

시간이 너무 오래 걸리는 일을 Sync로 처리하면, 그 작업이 처리될때까지 클라이언트가 서버에 들어가지 못한다

  • 동기 : 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 하는 방식이다.
  • 비동기 : 요청과 결과가 동시에 일어나지 않는 방식이다.

자바스크립트(싱글 쓰레드)는 한번에 하나의 함수만 실행할 수 있기 때문에 비동기 코드는 콜 스택에서
실행하는것은 가독성이 좋지 않아 이벤트 루프를 통해 실행합니다.

싱글 스레드 : 하나의 프로세스에서 하나의 스레드 실행
멀티 스레드 : CPU의 최대 활용을 위해 프로그램의 둘 이상을 동시에 실행하는 기술이다.

이벤트 루프

비동기를 처리하는 방법으로는 이벤트 루프가 있다.
콜 스택과 콜백 큐를 계속 주시하다가 콜 스택이 비어있으면,
먼저 들어온 순서대로 콜백 큐에 있는 콜백 함수들을 콜 스택에 집어넣습니다.

콜 스택: LIFO(후입 선출) 스택
콜 스택을 지속해서 확인하여 실행해야 하는 함수가 있는지 확인합니다.
큐 함수 : JavaScript는 실행할 작업을 찾고 순서대로 실행합니다.

비동기 방식

GET 메소드를 사용해서 서버와 통신으로 데이터를 조회할때
데이터를 요청하고, 기다리지않고 바로 다음 코드로 넘어가 버리기때문에 원하는 정보를 받아 올수 없다.
콜백 함수 -> 데이터를 요청하고 데이터를 받아올때까지 기다렸다가 실행되게 합니다.
콜백 지옥 -> 콜백 함수 안에 콜백함수를 부르게 되며, 가독성도 떨어지고 로직을 변경하기도 힘들다.
각 콜백 함수를 분리하여 사용 하면 된다.

콜백지옥의 가독성저하 문제를 해결하기 위해 등장한 것이 Promise이다
프로미스 js에서 비동기 처리를 할 때 이용하는 객체
프로미스를 통해 로직이 처리전인지, 완료되었는지, 실패했는지에 따라 상태가 결정된다.

  • Promise 객체는 비동기 작업이 끝나면 resolve로 결과를 전달하고 실패했을 때 reject로 에러를 전달합니다.

  • Promise 객체는 then과 catch로 결과를 받습니다. resolve로 전달받은 결과가 then으로 넘어오고 reject로 전달받은 에러는 catch로 넘어옵니다

  • Promise는 가독성이 좋지않아 보안하기 위해 나온개념이 Async/Await이다

async -> promise 객체로 보내지게 된다.
await -> 비동기 처리를 동기적인 것 처럼 처리할 수 있게 해주는 코드이다.
promise 반환문제점은 에러가 발생해도 반응이 없기 때문에 try catch를 사용하여 에러 핸들링을 해줘야 하는 것입니다.

profile
코린이 열심히 배우자!

0개의 댓글

Powered by GraphCDN, the GraphQL CDN