[Codecamp-Week6] Callback > Promise > async-await

혤·2022년 8월 12일

처음부터 비동기 처리를 위해 async-await를 써온 줄 알았는데 async-await도 역사가 있었다.
역시 세상에 똑똑한 개발자는 넘나 많은 것...

async-await를 쓰기까지의 과정을 살펴보자!

1. Callback

(1) Callback 함수란?

Callback 함수란 함수의 인자로 들어가는 함수를 말한다.

function aaa(qqq) {
  // 함수 로직
}

aaa(() => {})

여기서 aaa 안에 들어가는 화살표 함수를 Callback 함수라고 한다.

(2) Callback 함수 비동기 처리 활용하기

export default function CallbackPromiseAsyncAwaitPage() {
    const onClickCallback = () => {
        const aa = new XMLHttpRequest();
        aa.open("get", `http://numbersapi.com/random?min=1&max=200`);
        aa.send();
        // addEventListner야 데이터가 load 됐을 때 callback함수 실행시켜줘
        aa.addEventListener("load", (res: any) => {
            //   console.log(res);
            const num = res.target.response.split(" ")[0]; // 랜덤 숫자

            const bb = new XMLHttpRequest();
            bb.open("get", `http://koreanjson.com/posts/${num}`);
            bb.send();
            // addEventListner야 데이터가 load 됐을 때 callback함수 실행시켜줘
            bb.addEventListener("load", (res: any) => {
                // console.log(res);
                const userId = JSON.parse(res.target.response).UserId;

                const cc = new XMLHttpRequest();
                cc.open("get", `http://koreanjson.com/posts?userId=${userId}`);
                cc.send();
                // addEventListner야 데이터가 load 됐을 때 callback함수 실행시켜줘
                cc.addEventListener("load", (res: any) => {
                    console.log(res);
                });
            });
        });
    };
  
  return (
            <button onClick={onClickCallback}>Callback 요청하기</button>
	)
}

(3) Callback 함수의 문제점

Callback 함수로 비동기 처리를 해 줄 경우 위 코드에서도 대충 볼 수 있듯이 함수를 직관적으로 볼 수 없다.
총 3회의 API 요청만으로도 이렇게 어마어마한 양의 가독성 떨어지는 코드를 보게 되는데, 이러한 현상을 'Callback Hell(콜백 지옥)' 이라고 한다.

이러한 Callback hell을 극복하기 위해 Promise가 생겼다.

2. Promise

(1) Promise란?

Promise란 자바스크립트의 비동기 처리, 그 중에서도 특히 외부에서 많은 양의 데이터를 불러오는 작업에 사용되는 객체이다.
Promise 객체를 활용해서 만든 라이브러리가 axios이므로, Promise를 axios를 통해 살펴보자!

(2) Promise(axios) 비동기 처리 활용하기

import axios from "axios";

export default function CallbackPromiseAsyncAwaitPage() {
  const onClickPromise = () => {
        console.log("1번 실행");
        // promise chaining (call back hell 극복)
        axios
            .get("http://koreanjson.com/posts/1")
            .then((res) => {
                console.log("2번 실행");
                return axios.get("http://koreanjson.com/posts/2");
            })
            .then((res) => {
                console.log("3번 실행");
                axios.get("http://koreanjson.com/posts/3");
            })
            .then((res) => {
                console.log("4번 실행");
                console.log(res);
            });
        console.log("5번 실행");
    };
  return (
    <button onClick={onClickPromise}>Promise 요청하기</button>
  )
}

(3) Promise의 문제점

이 전 글에서 살펴본 것처럼 Promise는 background Micro queue에 들어갔다가 stack이 비워지면 실행된다.
따라서 비동기처리를 위해 Promise를 쓸 경우 코드를 작성한 순서와 다르게 함수가 실행되게 된다는 문제가 있다.
코드를 작성한 순서에 따라 비동기 처리를 하도록 하기 위해 async await가 생기게 되었다.