[Javascript] 비동기

주영·2025년 3월 20일
0

Javascript

목록 보기
12/15

비동기 asyncronous

비동기란 코드에 적힌 순서대로 코드를 실행하는 것이 아닌 것을 말한다.
동기 작업이 끝난 후나 동시에 시행할 수도 있고, 일부만 시행하고 다시 나중에 작업을 완료할 수도 있으며, 특정 작업이 일어나면 그때서야 시행할 수도 있고 다양하다.
일반적으로는 비동기 작업은 놔두고 동기 작업부터 먼저 처리한다.



Promise 객체

Promise 객체는 비동기 작업에서 비동기 작업이 완료되면 값을 알려주는 객체이다.


상태

Promise 객체는 3가지 상태를 가진다.

  1. Pending : 비동기 작업이 완료되지 않았을 때
  2. Fulfilled : 비동기 작업이 성공적으로 완료됐을 때
    • 이때 결과값으로 비동기 작업의 결과를 갖는다.
  3. Rejected : 비동기 작업이 실패했을 때
    • 이때 결과값으로 발생한 오류를 갖는다. 그리고 오류를 throw한다.

이 때문에 비동기 작업이 완료되기 전에 결과 값을 받아오면 Pending 상태의 Promise 객체를 받는다. (await를 쓰지 않으면 보통 그렇다)


method

공통족으로 아래와 같은 속성을 가진다.

  • 반환값도 Promise 객체이다.
  • callback 함수가 실행되지 않을 경우 앞선 Promise 객체를 그대로 반환한다.

Promise Chain

method의 반환값이 Promise 객체인 경우, method를 여러 번 연달아 쓸 수 있는데 이렇게 method가 연달아 이어진 것을 Promise Chain이라고 한다.

then

Promise.then(onFulfilled, [onRejected])
//Promise객체.then(함수1, [함수2])

Promise 객체가 Fulfilled 상태가 될 경우 onFullfiled callback 함수를 실행하며, Rejected 상태가 될 경우 onRejected callback 함수를 실행한다.

  • onFullfiledonRejected 함수의 첫번째 인자로는 Fulfilled/Rejected된 Promise 객체의 결과값이 들어간다.
  • 반환값도 Promise 객체이다.
  • callback 함수가 실행되지 않을 경우 앞선 Promise 객체를 그대로 반환한다.

catch

Promise.catch(onRejected)
//Promise객체.catch(함수)

Promise 객체가 Rejected 상태가 될 경우 callback 함수를 실행한다.

  • onRejected 함수의 첫번째 인자로는 Rejected된 Promise 객체의 결과값이 들어간다.
  • 반환값도 Promise 객체이다.
  • callback 함수가 실행되지 않을 경우 앞선 Promise 객체를 그대로 반환한다.

finally

Promise.finally(onFinally)
//Promise객체.finally(함수)

Promise 객체가 처리(Fulfilled/Rejected 상태) 될 경우 callback 함수를 실행한다.

  • onFinally 함수의 인자로 들어가는 값은 없다.
  • 반환값도 Promise 객체이다.

all

Promise.all(iterable)
//Promise객체.all( 배열과 같은 iterable )

여러 Promise 객체를 한꺼번에 처리하고 싶을 때/비동기 작업을 동시에 시행하고 싶을 때 배열과 같은 iterable로 묶어 사용한다.

  • 반환값도 Promise 객체이다.
    • Fulfilled : 모두 성공적으로 Fulfilled 되면 처리가 끝난 iterable을 반환
    • Rejected : Promise 객체 중 하나라도 Rejected 되면(되자마자) Rejected 된 해당 Promise 객체를 반환
  • iterable을 받을 경우 앞선 Promise 객체를 그대로 반환한다.



비동기 함수

기본적으로 항상 Promise 객체를 반환한다. (반환값이 없을때도)

async 키워드

비동기 함수를 만들때 사용하는 키워드. 함수 선언 앞에 적어주면 된다.

await 키워드

await 키워드는 비동기 작업이 완료(Promise 객체가 Pending에서 Fulfilled/Rejected)될 때까지 기다린다. 함수 내부에 있는 경우 기다리는 동안 함수 외부의(동기) 작업을 시행하고, 작업이 완료되면 함수 내부로 돌아온다.

  • async 함수 내 혹은 module의 가장 상위 레벨(흔히 생각하는 전역 범위/중괄호 밖)에서만 사용 가능하다.
profile
힘들어요

0개의 댓글