JavaScript의 콜백 지옥 솔루션

콜백 지옥에 대한 해결책 우리는 몇 가지 개념을 알아냈습니다.

약속

비동기 대기

약속은 콜백 지옥에 대한 해결책이 될 수 있지만 결국 then, catch의 연결과 같은 자체 상황이 있습니다. 그런 다음 Async-Await 개념으로 이 문제를 해결했습니다. Async-Await는 여러 번 연결하는 데 도움이 될 수 있습니다. 동기화 방식과 같은 코드를 작성하면 비동기 작업도 처리됩니다.

약속이 있는 솔루션.

⇒ Promise 체이닝의 예.

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

userId로 게시물을 찾습니다.

최신 게시물 찾기.

postId로 댓글을 찾습니다.

최신 댓글을 찾습니다.

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

→ 구현.

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

/posts?user_id=[사용자 ID]

/comments?post_id=[post_id]

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

// Solution Callback hell resolved with Promise..
const get = (url) => new Promise();

get(`/users?username=asadanik`)
    .then((user) => {
        return get(`/posts?user_id=${user.id}`);
    })
    .then((posts) => {
        const latestPost = posts[0];
        return get(`/comments?post_id=${latestPost.id}`);
    })
    .then((comments) => {
        const latestComment = comments[0];
        return get(`/users?username=${latestComment.username}`);
    })
    .then((user) => {
        console.log('Latest Comments user is -- ', user);
    })
    .catch(err => {
        console.log('ERR! of -- ', err);
    });

Not permanent, but this is the solution of Callback hell which is nested over times. But in this case, this is not nested hell but also this is chaining hell of .this Promise. Not so much difference between this 2 examples of data retrieving. But this is not hell chaining, this is easy to maintain and readable. This problem will solve with Async Await.

.then 체이닝을 사용한 Promise의 실생활 예

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

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

/// Real World Example with Fake REST API..
// Example of Promise.
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';

Axios.get(`${USERS_URL}?username=Samantha`)
    .then((userResponse) => {
        const { data: user } = userResponse;
        return Axios.get(`${POSTS_URL}?userId=${user[0].id}`);
    })
    .then((postsResponse) => {
        const { data: posts } = postsResponse;
        return Axios.get(`${COMMENTS_URL}?postId=${posts[0].id}`);
    })
    .then((commentsReponse) => {
        const { data: comments } = commentsReponse;
        const firstComment = comments[0];
        console.log(firstComment);
    })
    .catch(error => {
        console.log('ERR! of -- ', error);
    });

Promise Chaining의 솔루션을 살펴보겠습니다.