[TIL] 0416

yoon Y·2022년 4월 17일
0

2022 - TIL

목록 보기
76/109

JS 비동기 학습

  • 콜백 함수
  • 콜백 지옥
  • promise
  • async await

비동기 동작이란 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 것.
비동기 제어/처리란 비동기 동작 코드완료 후에 실행헤야 할 코드를 지정하는 것.

js는 동기적인 언어이기 때문에 비동기적인 코드를 사용하고 싶을 때 webApi를 사용해야한다.
비동기 코드 실행 완료 이후의 동작을 설정하고 싶을 땐 js의 콜백 함수, promise, async/await문법을 사용한다.

일반적인 비동기 처리 방법은 콜백함수를 사용하는 것이지만, 비동기 동작/처리를 연속으로 해야할 경우 콜백지옥이 될 수 있다. 이를 가독성있고 편리하게 사용하기 위해 promise, async/await가 생겼다.

promise생성자로 promise인스턴스 객체를 만들어 사용한다.
생성자 실행 시 전달하는 excutor함수안에 비동기 동작 코드를 작성하고 원하는대로 완료됐을 경우 resolve(result), 실패했을 경우 reject(error)함수를 실행하도록 작성한다.
promise생성자가 실행될 때 executor가 즉시 실행되고 대기 상태의 promise객체를 반환한다.
비동기 동작 코드가 실행완료되어 resolve, reject가 실행되면 promise의 상태는 fulfilled/rejected로 변경되고 그와 동시에 then, catch, finally메서드에 전달한 콜백함수가 실행된다.

then, catch, finally메서드의 핸들러 콜백함수는 프로미스가 언제 이행상태가 되던 항상 마이크로태스크 큐를 거쳐서 비동기적으로 실행된다.

async함수는 항상 promise를 반환한다. promise가 아닌 값을 반환해도 그 값을 result로 같은 이행된 promise를 반환한다.
await는 promise객체 앞에만 붙을 수 있고, 그 promise객체가 이행 상태가 될 때까지 기다린 후
result를 반환한다.
promise완료를 대기하는 동안은 async함수 이외의 나머지 코드들을 실행시키다가 완료되면 await 문장 이후의 코드를 실행시킨다.

profile
#프론트엔드

0개의 댓글