Async & Await , Promise

• 비동기란 ?
  • 요청한 내용을 응답해 줄 것을 약속한다는 의미
  • 즉, 요청과 응답이 바로 일어날 수도, 다른 시간대에 일어날 수도 있음
• 콜백함수란 ?
  • 콜백이란 이름이 있는 것이 아니라, 함수의 사용 용도가 call / back인 함수를 의미한다.
  • 클릭 이벤트가 발생할 때 출력되는 콜백 함수와 같은 말을 들어본 적이 있을 것이다.
• Promise란 ?
  • promise로 구현된 비동기 처리 함수는 콜백을 예측 가능한 패턴으로 사용하도록 도와준다.
  • 콜백 함수 안에서 생성된 프로미스 객체를 활용해 콜백함수가 성공,실패,오류 경우에 따라 후속 처리를 할 수 있다.
  • 순차적이지 않은 비동기 함수의 실행 순서를 제어할 수 있게 도와준다.
    콜백 패턴에 비해 코드 가독성이 좋고 반환된 결과물을 사용하기 편하다.

• Promise 작동 원리

  • Promise가 담긴 함수를 호출 ~> 함수가 생성이 되고 실행되지 않는다. 대신, 호출하는 부분이 실행된다.
  • 함수가 호출되면서 내부에 선언되었던 코드가 실행 ~> new Promise()의 인스턴스가 리턴되며, 콜백함수가 실행된다.
  • resolve()는 선언되어있어도 성공 조건이 충족되기 전까지 실행 X
  • return을 통해 생성된 인스턴스를 반환 ~> resolve()는 호출할 수 있는 환경이 되면 실행한다.
  • then 내부에 작성된 function()이 실행된다. then()을 실행하지 않고 다음 코드를 실행
  • create()의 모든 함수가 끝나고 resolve() 함수가 호출 ~> 성공인지 실패인지 리턴
  • Promise 객체가 then과 catch 체인함수가 있는데, 결과값이 성공 ~> 자체적으로 resolve, reject 지정한 것을 리턴 ~> 각 로직으로 간다.
  • 다음 프로미스를 then을 통해 사용한다. (앞의 작업의 결과를 기다렸다가 반환되면 이어져있는 프로미스 작업이 시작된다. 체인구조)
  • Promise는 3 상태를 가질 수 있다. (fullfilled : 이행, ready? : pending, reject : 거절)
    • 이 상태에 따라서 then, catch 등 사용하는 것이 달라짐.
• async / await 이란?
  • async는 비동기 함수로 이용하겠다는 표시(?)라고 생각하면 될 것 같다. "이 함수는 비동기로 활용하겠습니다" 라는 의미, async와 await은 내부적으로 프로미스를 통해 돌아간다. Promise를 쓰는 경우, 무수한 콜백 지옥과 가독성이 떨어진다는 이유로 나왔다고(??) 알고있다.

• async/await 작동 원리

  • async 함수 선언을 통해 비동기 함수를 정의 ~> 생성된 함수는 AsyncFunction 객체를 반환 ~> 이 객체는 함수 내에 포함되어 있는 코드를 수행하는 비동기 함수
  • async로 만든 비동기 함수가 호출되면 프로미스(Promise)를 반환한다.
  • 비동기 함수가 프로미스가 아닌 값을 반환 ~> 프로미스 자동 생성 ~> 함수로 반환 받은 값을 이행한다. -> async 함수가 예외를 던지면 프로미스는 던져진 값과 함께 거절됨
  • await 구문은 함수의 수행을 멈추고 프로미스의 이행 값이 넘어오기를 기다렸다가 async 함수의 수행을 계속해서 이어가다가, 마지막에 이행된 값을 반환
  • Promise의 이용을 쉽게 하는 용도
  • await 키워드는 async 함수 내에서만 이용 가능 ~> 동기적으로 프로미스를 기다리게함
  • async 밖에서 프로미스를 사용하면 then 콜백을 이용해야한다.
  • await 함수를 프로미스 객체를 리턴해줘야한다.