비동기식 javascript

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

https://new93helloworld.tistory.com/358

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

---

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] 콜백 지옥 탈출하기! 비동기 처리 방법 - 하나몬

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)

---