🤯 안끝난 비동기 Async / Await 개념(with JS)

Yoonmin·2024년 12월 13일

javascript

목록 보기

2/3

제목이 이런 이유는 앞에 적은 Promise,동기,비동기 내용이 너무 길어져
따로 async/await를 설명하고자,,,(이하 생략)

✅ Async / Await ,,, 누구,,,?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.
async와 await은 기존의 비동기 처리 방식인 callback 함수, Promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

➕ Syntatic Sugar(문법적 설탕)라고도 불립니다.
Syntatic Sugar란 코드를 더 알기 쉽게 작성하고 이해할 수 있도록 도와주는 문법적인 표현방식입니다.

✅ async

async는 function 앞에 붙습니다.
async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다.
프라미스가 아닌 값을 반환하더라도 resolved promise로 값을 감싸 resolved promise가 반환되도록 합니다.

아래 예시의 함수를 호출하면 result가 1인 resolve promise가 반환됩니다.
async function f() {
  return 1;
}
f().then(alert); // 1
명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다.
async function f() {
  return Promise.resolve(1);
}
f().then(alert); // 1

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.

또 다른 키워드인 await는 async 함수 안에서만 동작합니다.

✅ await

자바스크립트는 await 키워드를 만나면 Promise가 처리될 때까지 기다리고 결과는 그 이후 반환됩니다.

(await는 '기다리다’라는 뜻을 가진 영단어입니다).
// await는 async 함수 안에서만 동작합니다.
let value = await promise;
Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드가 기다려요.
Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것이죠.

✔️ 예시(Toss payments)

예시를 보면 더 쉬운데요.

아래와 같이 결제를 요청하는 requestPayment() 메서드 앞에 await가 있습니다.
결제 요청이 잘 완료되어 paymentData(Promise 객체)의 상태가 바뀐 이후에만 console.log(paymentData)가 실행됩니다. 즉, 비동기 작업을 동기적으로 바꾸는 것이죠.
async function handleSubmit() {
  const paymentData = await paymentWidget.requestPayment({
    orderId: "KOISABLdLiIzeM-VGU_8Z", // 주문번호(직접 만들어주세요)
    orderName: "토스 티셔츠 외 2건" // 주문명(직접 만들어주세요)
  });
  console.log(paymentData);
  return paymentData //Promise 객체의 상태가 바뀌어야 conole.log 정상 출력
}

사실상 await는 then()과 같은 역할을 하는데, 콜백 함수를 등록할 필요가 없기 때문에 더 편리합니다.
체이닝으로 인해 코드가 복잡해질 일도 없죠.

✔️ 에러 처리법

근데 에러는 어떻게 처리할까요?

async/await로 코드를 동기적으로 바꾸는 것으로 생각할 수 있다고 했습니다.
그럼 이제 간단히 try/catch를 사용하면 됩니다.
아래 코드에서는 requestPayment()에서 실패 상태의 Promise를 반환하면, 바로 catch 블록이 실행됩니다

async function handleSubmit() {
    try {
        const paymentData = await paymentWidget.requestPayment({
        orderId: "KOISABLdLiIzeM-VGU_8Z", // 주문 ID(직접 만들어주세요)
        orderName: "토스 티셔츠 외 2건" // 주문명
        });
        console.log(paymentData);
        // 성공 처리
        return paymentData;
    } catch (error) {
        // 에러 처리
        console.log(error.message);
    }
}