비동기식 javascript

The Web Developer 부트캠프 2023/JS

비동기식 javascript

tjdvyzl 2023. 7. 23. 22:03

콜 스택 (Call Stack) & WebAPI와 단일 스레드 작동 방식

https://new93helloworld.tistory.com/358

자바스크립트 호출 스택(Call Stack) 이해하기

시작하기에 앞서자바스크립트를 심도 있게 이해하기 위해 "모든 자바스크립트 개발자가 알아야할 33가지 개념(https://github.com/yjs03057/33-js-concepts)"의 항목들과 링크되어있는 블로그 글들을 정리하

new93helloworld.tistory.com

callback 지옥 & promise

https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/

[JavaScript] 콜백 지옥 탈출하기! 비동기 처리 방법 - 하나몬

앞선 컨텐츠에서 자바스크립트 엔진, 자바스크립트 런타임의 작동 방식에 대한 이야기부터 싱글 스레드 프로그래밍 언어에서의 동기로 인한 블로킹을 해결을 위한 비동기에 대한 이야기까지

hanamon.kr

const fakeRequestCallback = (url, success, failure) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
        if (delay > 4000) {
            failure(`Connection Timeout :(`);
        } else {
            success(`Here is your fake data from ${url}`);
        }
    }, delay)
}

// const fakeRequestPromise = (url) => {
//     return new Promise((resolve, reject) => {
//         const delay = Math.floor(Math.random() * 4500) + 500;
//         setTimeout(() => {
//             if (delay > 4000) {
//                 reject(`Connection Timeout :(`);
//             } else {
//                 resolve(`Here is your fake data from ${url}`)
//             }
//         }, delay)
//     })
// }

fakeRequestCallback('books.com/page1',
    function (response) {
        console.log(`IT WORKED!!!`);
        console.log(response);
        fakeRequestCallback('books.com/page2',
            function (response) {
                console.log(`IT WORKED AGAIN!!!`);
                console.log(response);
                fakeRequestCallback('books.com/page3',
                    function (response) {
                        console.log(`IT WORKED 3rd!!!`);
                        console.log(response);
                    },
                    function (err) {
                        console.log(`ERROR (3rd req)`, err);
                    })
            },
            function (err) {
                console.log(`ERROR (2nd req)`, err);
            })
    }, function (err) {
        console.log(`ERROR`, err);
    }
)

fakeRequestCallback

const fakeRequestPromise = (url) => {
    return new Promise((resolve, reject) => {
        const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
            if (delay > 4000) {
                reject(`Connection Timeout :(`);
            } else {
                resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

let t = fakeRequestPromise('temp.com/page1')
    .then(() => {
        console.log("IT WORKED! (page1)")
        fakeRequestPromise('temp.com/page2')
            .then(() => {
                console.log("IT WORKED! (page2)")
                fakeRequestPromise('temp.com/page3')
                    .then(() => {
                        console.log("IT WORKED! (page3)")
                    })
                    .catch(() => {
                        console.log("err! (page3)")
                    })
            })
            .catch(() => {
                console.log("err! (page2)")
            })
    })
    .catch(() => {
        console.log("err! (page1)")
    })

fakeRequestPromise

const fakeRequestPromise = (url) => {
    return new Promise((resolve, reject) => {
        const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
            if (delay > 4000) {
                reject(`Connection Timeout :(`);
            } else {
                resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

fakeRequestPromise('temp.com/page1')
    .then((data) => {
        console.log(`IT WORKED!!! (page1)`);
        console.log(data);
        return fakeRequestPromise('temp.com/page2');
    })
    .then((data) => {
        console.log(`IT WORKED!!! (page1)`);
        console.log(data);
        return fakeRequestPromise('temp.com/page2');
    })
    .then((data) => {
        console.log(`IT WORKED!!! (page1)`);
        console.log(data);
        return fakeRequestPromise('temp.com/page2');
    })
    .catch((err) => {
        console.log('request failed!');
        console.log(err);
    })

fakeRequestPromise(refactoring)

const fakeRequestPromise = async (url) => {
    return new Promise((resolve, reject) => {
        const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
            if (delay > 4000) {
                reject(`Connection Timeout :(`);
            } else {
                resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}


async function f() {
    try {
        await fakeRequestPromise('temp.com/page1');
        console.log('success page1');
        await fakeRequestPromise('temp.com/page2');
        console.log('success page2');
        await fakeRequestPromise('temp.com/page3');
        console.log('success page3');
    }
    catch (err) {
        console.log('request failed!');
        console.log(err);
    }
}

fakeRequestPromise(async, await)