[JS] CallBack 함수 & Promise

CallBack 함수

함수의 인자로 들어가는 함수를 말합니다.

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

aaa( funtion() { } )

aaa( () => {} ) // 이것도 가능

위와 같은 코드에서, aaa 함수의 인자에 들어가는 function(){}를 callback 함수라고 부릅니다.

콜백함수는 특정한 API 요청이 끝난 뒤, 그 결과 값을 가지고 다른 요청을 실행시켜야 하는 상황을 callback 함수를 사용해서 요청을 실행할 수 있습니다.
ex)

function aaa(qqq){
	// 외부 API에 데이터 요청하는 로직
	// ...
	// ...
	// 요청 끝!
	const result = "요청으로 받아온 데이터 결과값"
	qqq(result) // 요청 끝나면 qqq 실행시키기
}

aaa((result) => {
	console.log("요청이 끝났습니다.")
	console.log("요청으로 받아온 데이터는" + result + "입니다")
});

ex) koreaJson 응용

/*
	1. 1-200 랜덤 수 받아오기
    2. koreanjson.com/posts/랜덤숫자
    3. 2번 작성자가 쓴 다른 게시글 모두 보기
*/

const onClickCallback = () => {
	// es5 초기 방법
    const getXML = new XMLHttpRequest();
    getXML.open("get", `http://numbersapi.com/random?min=1&max=200`); // api를 get 방식으로 호출하기
    getXML.send();
    getXML.addEventListener("load", (res) => {
    	console.log(res); // API 요청 결과
        const num = res.target.response.split(" ")[0]; // 랜덤숫자 뽑기
        const postXML = new XMLHttpRequest();
        postXML.open("get", `https://koreanjson.com/posts/${num}`);
        postXML.send();
        postXML.addEventListener("load", (res) => {
        	console.log(res);
            const userId = JSON.parse(res.target.response).UserId;
            const postUserXML = new XMLHttpRequest();
            postUserXML.open("get", `https://koreanjson.com/posts?userId=${userId}`);
            postUserXML.send();
            postUserXML.addEventListener("load", (res) => {
            	console.log(res); // 최종 API 요청 결과
        	});
    	});
	});
};

위와같이 받아온 함수에 API 중첩이 많아질수록 Callback 함수가 가독성을 심각하게 떨어뜨리는데 이걸 콜백 지옥 이라 합니다.

Promiss 함수

콜백 지옥과 같은 현상을 막고자 나온 것이 바로 Promise 입니다.

ex) 기본 사용법

new Promise((성공했을때함수, 실패했을떄함수) => {
     try {
         // 여기서 API 요청을 한다면??
         const response = "철수";
         성공했을때함수();
     } catch (error) {
         실패했을떄함수("실패했습니다!!!");
     }
}).then(() => {
  	// 성공시
	console.log(res); // 철수
  })
	.catch(() => {
    	// 실패시
        console.log(err); // 실패했습니다!!!
    });

ex) koreaJson 응용

const onClickPromise = () => {
	axios
    	.get(`http://numbersapi.com/random?min=1&max=200`)
        .then((res) => {
            console.log(res);
            const num = res.data.split(" ")[0]; // 랜덤숫자 뽑기
            return axios.get(`https://koreanjson.com/posts/${num}`);
	})
    .then((res) => {
        const userId = res.data.UserId;
        return axios.get(`https://koreanjson.com/posts?userId=${userId}`);
   	})
    .then((res) => {
    	// 최종결과
        console.log(res);
	});
};

promise를 사용할 경우 각 요청들이 체인처럼 연결되는데,

이러한 것을 프로미스 체인(Promise chain) 또는 프로미스 체이닝(Promise chaining) 이라고 부릅니다.