[JS] Promise, async • await 비동기 처리

say_ye·2022년 6월 16일

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

pending(대기), fulfilled(이행), rejected(거부) 상태를 가집니다.
pending: 이행되지도 거부되지도 않은 초기상태
fulfilled: 연산이 성공적으로 완료됨
rejected: 연산이 실패함
-> fulfilled, rejected를 통틀어 settled(처리) 라고 합니다.
여러개의 Promise를 체이닝하는것이 가능합니다.
then(), catch()는 Promise를 반환하기 때문입니다.

문법

생성자

const promise = new Promise(executor);

주의❗️ Promise가 만들어지는 순간 excutor는 자동으로 실행됩니다.
then, catch 메서드를 호출할 때 실행 된다고 착각하면 안됩니다요.

정적 메서드

all(iterable)
주어진 모든 프로미스가 이행되거나 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환합니다. 거부된다면 거부된 프로미스의 첫 사유를 그대로 사용합니다.
allSettled(iterable)
주어진 모든 프로미스가 처리될 때까지 대기하는 새로운 프로미스를 반환합니다. 프로미스 각각의 상태와 값을 모아놓은 배열로 이행합니다.
any(iterable)
주어진 모든 프로미스 중 하나라도 이행하는 즉시 그 프로미스의 값으로 이행하는 새로운 프로미스를 반환합니다. 전부 거부된다면 AggregateError와 함께 거부하는 프로미스를 반환합니다.
race(iterable)
주어진 모든 프로미스 중 하나라도 처리될 때까지 대기하는 프로미스를 반환합니다.
reject(reason)
주어진 사유로 거부하는 프로미스를 반환합니다.
resolve(value)
주어진 값으로 이행하는 프로미스를 반환합니다.

인스턴스(프로토타입) 메서드

then()
프로미스에 이행 및 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행하며 호출되지 않을 경우 처리된 값과 상태 그대로 처리되는 새로운 프로미스를 반환합니다.
catch()
프로미스에 거부 처리기 콜백을 추가하고, 콜백이 호출 될 경우 그 반환값으로 이행하며 호출되지 않을 경우 이행한 값을 그대로 사용해 이행하는 새로운 프로미스를 반환합니다.
finally()
프로미스의 이행 및 거부 여부에 상관없이 항상 호출될 처리기 콜백을 추가하고, 이행한 값 그대로 이행하는 새로운 프로미스를 반환합니다.

예시

promise
    .then((value) => {
        console.log(value)
    })
    .catch((error) => {
        console.error(error)
    )
    .finally(() => {
        console.log('done!')
    })

async • await

비동기 코드를 보다 간결하고 가독성있게 작성할 수 있게 하는 문법으로, 이를 이용하여 Promise 반환값을 받아 올 수 있습니다.

완전히 새로운 문법이 발명된 것이 아닌 일종의 syntactic sugar 입니다.
syntactic sugar : 기존의 방식보다 사람이 이해하고 표현하기 쉽게 디자인적으로 개선된 프로그래밍 문법
즉 Promise의 더 서윗 한 버전이라고 할 수 있겠습니다.

문법

const a = async () => {
  const promise = Promise.resolve(1);
  const result = await promise;
}

await 뒤에 오는 promise 가 이행될 때까지 기다렸다가 다음 구문을 실행합니다.
await을 사용하는 함수는 반드시 async 함수여야 합니다.
참고로 await 뒤에 오는 객체가 Promise타입이 아니면 의미가 없습니다. 실행은 되지만...
저는 이걸 잘 모르는 상태로 await을 사용해서 이상한 코드를 작성했던 적이 있습니다. await setState() 이런식으로요.. 그런데 리액트의 setState 는 비동기적으로 동작하지만 Promise를 반환하지는 않거든요.. 이런건 의미가 없습니다.

Promise vs async • await

	Promise	async • await
버전	ES6에 도입	ES8(EcmaScript 2017) 에 도입
에러 핸들링	.catch()	try-catch 문
코드 가독성	.then지옥	비동기 코드가 동기 코드처럼 읽히기 해주어 코드 흐름을 이해하기 쉬움

async await을 사용하는게 항상 답은 아닌 것 같습니다.
try catch문법을 따로 사용해서 에러처리를 하는게 더 번거로울 수도 있고요.
저도 심각한 체이닝 지옥이 생기는 상황이 아니면 Promise를 사용하는 경우가 많은 것 같습니다.

참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise