JavaScript의 콜백 지옥

콜백 지옥은 자바스크립트 개발자가 여러 비동기 작업을 차례로 실행하려고 할 때 괴롭히는 현상입니다. 콜백 중첩
그런 식으로 우리는 오류가 발생하기 쉽고 읽기 어렵고 유지 관리하기 어려운 코드로 쉽게 끝납니다. Soln: 이를 처리하는 최상의 코드 연습입니다.

이는 복잡한 중첩 콜백으로 코딩하여 발생하는 큰 문제입니다. 여기에서 각각의 모든 콜백은 이전 콜백의 결과인 인수를 사용합니다. 이렇게 하면 코드 구조가 피라미드처럼 보이기 때문에 읽고 유지하기가 어렵습니다.

⇒ 콜백 지옥의 예.

사용자 이름으로 사용자를 찾습니다.

userId로 게시물을 찾습니다.

최신 게시물 찾기.

postId로 댓글을 찾습니다.

최신 댓글을 찾습니다.

마지막 댓글 사용자의 사용자를 찾습니다.

→ 구현.

/users?username=[사용자 이름]

/posts?user_id=[사용자 ID]

/comments?post_id=[post_id]

/users?username=[사용자 이름]

// GetData..
function getData(path, cb){
    const data = []; // Somehow collect the Data..
    cb(data);
}

function getUserNameFromComment(username){
    getData(`/users?username=${username}`, (user) => {
        getData(`/posts?user_id=${user._id}`, (posts) => {
            getData(`/comments?post_id=${posts[0]._id}`, (comments) => {
                getData(`/users?username=${comments[0].username}`, (user) => {
                    // Then 😃 you can get latest user of comment.
                    console.log(user);
                });
            });
        });
    });
}

getUserNameFromComment("Mohammad Asad");

콜백 지옥의 실생활 예.

이 REST API 웹사이트https://jsonplaceholder.typicode.com를 사용하여 가짜 API를 사용하여 예제를 완성했습니다.

HTTP 요청을 처리하기 위해 Axios 라이브러리를 사용했습니다.

/// Real World Example with Fake REST API..
// Example of Callback Hell.
const Axios = require('axios').default;

const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

function getFunc(URL, cb){
    Axios.get(`${URL}`)
        .then((response) => {
            const { data } = response;
            cb(data);
        });
}

function getCommentByUser(username){
    getFunc(`${USERS_URL}?username=${username}`, (user) => {
        getFunc(`${POSTS_URL}?userId=${user[0].id}`, (posts) => {
            getFunc(`${COMMENTS_URL}?postId=${posts[0].id}`, (comments) => {
                const firstComment = comments[0];
                console.log(firstComment);
            });
        });
    });
}

getCommentByUser("Samantha");

콜백 지옥의 해결책을 보자