비동기 처리를 위한 async와 await 코드

1. async 란
 - 비동기 처리를 위한 문법
 - 특정 함수가 Promise를 반환하게 함
 - 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능

 

 2. await 란
 - 비동기 처리 결과를 기다리게 함
 - async 함수 내부에서만 사용 가능
 - 프로미스 체이닝을 간결하게 개선(가독성 증가)

 

 

 

// JavaScript 관련 구글링

// 👉 site:developer.mozilla.org {연관_키워드}

'use strict';

// 1. async 란

// - 비동기 처리를 위한 문법

// - 특정 함수가 Promise를 반환하게 함

// - 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능

// 비동기 함수, Proimse 활용(군더더기가 많은 코드)

function myPromise() {

    return new Promise((resolve, reject) => {

        resolve("🍎");

    });

}

console.log(myPromise());

// 비동기 함수, async 활용(담백한 코드로 개선)

// 프로미스를 반환

async function myAsync(){

    return "🍎"; // resolve("🍎")

}

console.log(myAsync());

// 2. await 란

// - 비동기 처리 결과를 기다리게 함

// - async 함수 내부에서만 사용 가능

// - 프로미스 체이닝을 간결하게 개선(가독성 증가)

// 3. try-catch-finally 구문

// - 예외 처리를 위한 구문

// - 예외란, 특정 코드가 수행에 실패한 것

// - 프로미스 체이닝에서, then-catch-finally와 같은 개념

// 비동기 함수

function carrotPromise() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            if (Math.random() < 0.5) {

                resolve("🥕");

            } else {

                reject("🍉");

            }

        }, 1000);

    });

}

// 요리하기: 당근 => 스프

// 더 깔끔한 코드는 없을까..?

// async와 await로 코드를 개선

async function cookCarrotSoup(){

    try{

        // try: 정상 수행하길 기대하는 코드

        const carrot = await carrotPromise(); // await코드 하면 이 해당  carrotPromise() 코드가 실행되기 전까지는 다음으로 넘어가지 않는다.

        console.log(`[${carrot}] 스프를 만들었어요`);

        return "당근 스프"; // resolve("당근 스프");

    } catch(err) {

        // catch: 예외 발생시, 처리할 코드

        console.log(`요리 실패: ${err}으로 스프를? 멈춰!`);

         throw new Error("요리 실패"); // reject("요리 실패");

    } finally {

        // finally: 무조건 수행할 코드

        console.log("== 끝 ==")

    }

 

}

// 체이닝 호출도 가능? Yes.

cookCarrotSoup()

   .then((data) => {console.log(data)})

   .catch((err) => {console.log(err)})

   .finally(() => {console.log("== 진짜로 끝 ==")});

출저: 홍팍 (https://www.youtube.com/@hongpark)

이 블로그 기록은 개인 공부용 기록입니다.