[IT] 프라미스(Promise) 란 ? ( async / await )

이걸 정리해놔야지 하면서 딴짓하다가 이제라도 정리하려고 한다.

JavaScript에서 비동기 작업을 다루는데 사용되는 중요한 개념 중 하나이다.

비동기 작업은 주로 시간이 걸리는 작업을 다룰 때 발생한다.

보통 데이터베이스 관련된 작업이나 네트워크 요청이 필요한 작업에서 자주 사용하고 있다.

사실 프라미스 라는 단어는 생소할 수 있어도 비동기처리나, async / await 은 사용해봤거나 들어본적은 있을꺼다.

내가 그랬기때문에 다른 사람들도 그랬기를 바란다. 왜냐하면 이게 뭔지도 모르고 쓰냐고 혼난적이 있기 때문이다 ㅎ

동작은 크게 4가지로 구분지어서 살펴볼 수 있는데

• 상태(State)
• 대기(pending): 비동기 작업이 아직 완료되지 않은 상태.
• 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태.
• 거부(rejected): 비동기 작업이 실패한 상태.

then() 메서드

• 프라미스는 .then() 메서드를 사용하여 성공(fulfilled) 및 실패(rejected) 상태에 대한 처리를 정의할 때 사용한다.

catch() 메서드:

• .catch() 메서드를 사용하여 프라미스에서 발생한 에러를 처리한다.

연결성(Chaining):

• 여러 프라미스를 연결하여 비동기 작업을 순차적으로 처리할 수 있다.
• .then() 메서드를 여러 번 호출하여 연속적으로 구성할 수 있습니다.

내가 작성한 코드로 간단히 살펴보면

import axios from "axios";

export const getAllData = async () => {
  try {
    const getAllData = await axios.get(
      process.env.NEXT_PUBLIC_API_ADRESS
    );
    return getAllData;
  } catch (e) {
    throw e;
  }
};

.env
NEXT_PUBLIC_API_ADRESS = "API 주소"

axios 를 이용해서 비동기적으로 HTTP GET 요청을 보내고, 해당 요청에 대한 응답을 처리하는 함수이다.

async / await 을 사용할때는 try {} catch(e) {} 을 꼭 사용해야한다.

비동기 작업을 시도하고, 작업이 실패하면 예외를 처리해줘야 하기 때문이다.

아니면 보통 기본 예제 코드로 살펴보면

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber < 0.5) {
      resolve(randomNumber);
    } else {
      reject(new Error('랜덤 숫자가 0.5보다 큽니다.'));
    }
  }, 1000);
});

// 프라미스 처리
promise
  .then((result) => {
    console.log('성공:', result);
  })
  .catch((error) => {
    console.error('에러:', error);
  });

1초 후에 무작위 숫자를 생성하고

이 숫자가 0.5보다 작으면 성공 상태로 처리하고 아니면 에러 상태로 처리하는 간단한 코드이다.

그런 다음 .then() 및 .catch() 메서드를 사용하여 결과와 에러를 처리하게 한다.

작업이 순서대로 처리해야하는 일은 실무를 할때나 개인적으로 프로젝트를 진행할때도 자주 발생한다.

그때마다 비동기처리를 해야하겠지만 그게 뭔지는 사용해서 나처럼 혼나거나 뻘쭘한 상황이 발생하지않게 미리미리 알아두자 !!