JavaScript의 특성 : 비동기 처리
✔︎ 비동기란,
⇒ 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 말한다.
⇒ 즉, 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이다.
⇒ 이에는 문제점이 있다. 데이터를 받아와 실행시키는 코드를 예를 들어보자. 데이터를 받아오는데 3초가 걸리는데, 비동기 처리는 이를 기다리지 않고 코드가 실행된다. 이에 'undefined'가 나올 수 있다.
⇒ 이러한 문제를 해결하기 위해 콜백함수를 사용한다.
⇒ 하지만 콜백 함수를 연속해서 사용할 때, CallBack Hell이 발생할 수도 있다.
⇒ 이를 해결하기 위해 나온것이 Promise 와 Async
⇒ Async의 await는 최근에 나온 함수이다.
⇒ 콜백함수는 함수를 다시 불러 결과를 리턴해야지만 다음 코드로 넘어갈 수 있다.
⇒ Promise의 함수는 resolve, reject를 인자로 받고, then 을 통해 이전 코드를 실행을 기다려줄 수 있다.
⇒ 일종의 브레이크를 밟아주어 신호를 기다린다고 생각하면 편하지 않을까 !
⇒ resolve : 호출해 프로미스를 이행 (go to next Action)
⇒ reject : 호출해 거부 (handle error)
메소드
.catch : 실패한 이유 받을 수 있다.
.then : 앞에 함수가 실행되면 뒤에 인자가 실행된다.
Pending(대기)
⇒ 비동기 처리 로직이 아직 완료되지 않은 상태
⇒ new Promise() 메서드를 호출하면 대기상태
⇒ 이 상태에 콜백 함수를 선언할 수 있고, 콜백 인자는 resolve
와 reject
Fulfilled(이행, 완료)
⇒ 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
⇒ resolve()
를 실행하면 이행 상태
⇒ 이행 상태가 되면 then()을 이용하여 결과 값을 받을 수 있음.
Rejected(실패)
⇒ 비동기 처리가 실패하거나 오류가 발생한 상태
⇒ reject()
를 호출하면 실패 상태
⇒ 이 상태에서는 실패한 일, 싱패 터리 결과 값을 catch()
로 받을 수 있습니다.
async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법
위에서부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 것 ⇒ async, await 문법의 목적
await
async function 함수명() {
await 비동기_처리_메서드_명();
}
await연산자는 Promise를 기다리기 위해 사용된다.
연산자는 async function 내부에서만 사용할 수 있다.
✱ 비동기를 이해하는데 가장 많이 도움이 되었던
https://joshua1988.github.io/web-development/javascript/js-async-await/