동기/비동기

CUE·2021년 5월 19일
0

JavaScript

목록 보기
4/4

JavaScript의 특성 : 비동기 처리

✔︎ 비동기란,
⇒ 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 말한다.
⇒ 즉, 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이다.
⇒ 이에는 문제점이 있다. 데이터를 받아와 실행시키는 코드를 예를 들어보자. 데이터를 받아오는데 3초가 걸리는데, 비동기 처리는 이를 기다리지 않고 코드가 실행된다. 이에 'undefined'가 나올 수 있다.
⇒ 이러한 문제를 해결하기 위해 콜백함수를 사용한다.
⇒ 하지만 콜백 함수를 연속해서 사용할 때, CallBack Hell이 발생할 수도 있다.
⇒ 이를 해결하기 위해 나온것이 Promise 와 Async
⇒ Async의 await는 최근에 나온 함수이다.

⇒ 콜백함수는 함수를 다시 불러 결과를 리턴해야지만 다음 코드로 넘어갈 수 있다.
⇒ Promise의 함수는 resolve, reject를 인자로 받고, then 을 통해 이전 코드를 실행을 기다려줄 수 있다.
⇒ 일종의 브레이크를 밟아주어 신호를 기다린다고 생각하면 편하지 않을까 !

✔︎ Promise (자바스크립트 비동기 처리에 사용되는 객체)

⇒ resolve : 호출해 프로미스를 이행 (go to next Action)
⇒ reject : 호출해 거부 (handle error)

메소드
.catch : 실패한 이유 받을 수 있다.
.then : 앞에 함수가 실행되면 뒤에 인자가 실행된다.

✔︎ Promise의 3가지 상태

Pending(대기)
⇒ 비동기 처리 로직이 아직 완료되지 않은 상태
⇒ new Promise() 메서드를 호출하면 대기상태
⇒ 이 상태에 콜백 함수를 선언할 수 있고, 콜백 인자는 resolvereject

Fulfilled(이행, 완료)
⇒ 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
resolve()를 실행하면 이행 상태
⇒ 이행 상태가 되면 then()을 이용하여 결과 값을 받을 수 있음.

Rejected(실패)
⇒ 비동기 처리가 실패하거나 오류가 발생한 상태
reject() 를 호출하면 실패 상태
⇒ 이 상태에서는 실패한 일, 싱패 터리 결과 값을 catch() 로 받을 수 있습니다.

✔︎ Async

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법
위에서부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 것 ⇒ async, await 문법의 목적

await

async function 함수명() {
  await 비동기_처리_메서드_명();
}

await연산자는 Promise를 기다리기 위해 사용된다.
연산자는 async function 내부에서만 사용할 수 있다.


✱ 비동기를 이해하는데 가장 많이 도움이 되었던
https://joshua1988.github.io/web-development/javascript/js-async-await/

profile
archive

0개의 댓글