JavaScript의 Promise Chaining 솔루션

Callback Hell의 문제를 해결하려고 할 때 코딩 스타일과 코드 처리에 좋지 않은 또 다른 유형의 문제가 있습니다. 그것은 then, catch 여러 번을 연결하는 것입니다. 따라서 해결책은 동기 방식으로 비동기 작업을 처리하기 위해 Async-Await를 사용하는 것입니다.

⇒ 이 Async Await는 Callback Hell과 Promise Chaining Hell 문제를 해결합니다. Async 함수는 Promise standalone 😎을 반환해야 합니다.

⇒ Async Await의 예.

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

userId로 게시물을 찾습니다.

최신 게시물 찾기.

postId로 댓글을 찾습니다.

최신 댓글을 찾습니다.

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

→ 구현.

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

/posts?user_id=[사용자 ID]

/comments?post_id=[post_id]

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

// Example of Async Await..
async function getUserName(username){
    const mainUser = await get(`/users?username=${username}`);
    const posts = await get(`/posts?user_id=${mainUser.id}`);
    const comments = await get(`/comments?post_id=${posts[0].id}`);
    const user = await get(`/users?username=${comments[0].username}`);
    console.log(user);
}

getUserName('Mosammat Akhi');

Basically the Async Await is the system where you can see the Asynchronous code just like same as the Synchronous code. 💁🏻 We declared this complex Callback Hell and Promise .this chaining Hell with simple like Synchronous style of Asynchronous Task 🙄.

→ 따라서 Error를 처리하면 보고 관리할 수 있습니다.

// Example of Async Await..
async function getUserName(username){
    try {
            const mainUser = await get(`/users?username=${username}`);
            const posts = await get(`/posts?user_id=${mainUser.id}`);
            const comments = await get(`/comments?post_id=${posts[0].id}`);
            const user = await get(`/users?username=${comments[0].username}`);
            console.log(user);

    } catch (ERR) {
        console.log('ERR! when try to fetching data -- ', ERR);
    }
}

getUserName('Rakhiyaatul Kubra');

This code can handle or see the Error when you needs like Promise .catch chain. We can use Try-Catch block instead of Promise.

그러나 Promise 없이는 Async Await 작업을 이해할 수 없습니다.

Async Await의 실생활 예.

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

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

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

async function getCommentByUser(username){
    try {
        const { data: mainUser } = await Axios.get(`${USERS_URL}?username=${username}`);
        const { data: posts } = await Axios.get(`${POSTS_URL}?userId=${mainUser[0].id}`);
        const { data: comments } = await Axios.get(`${COMMENTS_URL}?postId=${posts[0].id}`);
        const firstComment = comments[0];
        console.log(firstComment);

    } catch (error){
        console.log('ERR! from -- ', error);
    }

}

getCommentByUser('Samantha');

⇒ Async Await의 또 다른 실제 예.

Async Await 함수는 Promise 자체를 반환합니다. 따라서 우리는 Async Await 함수 호출의 .then .catch 연결을 만들 수 있습니다.

// Another Real Life Example..
const Axios = require('axios');
const URL = "https://jsonplaceholder.typicode.com/users";

// Async Await to get data..
async function getUsers(){
    const { data: users } = await Axios.get(URL);
    return users;
}

// Make .then .catch promise from Async Await function..
// Async function returns the Promise.
getUsers().then((users) => {
    console.log(users);
}).catch((error) => {
    console.log(error);
});