[JAVA SCRIPT] JS - Promise() 복습

Ex01. 전형적인 비동기 함수 예제

// // 전형적인 비동기 예제
function f1() {
    setTimeout(() => {
        console.log(1);
    }, 2000)
}

function f2() {
    setTimeout(() => {
        console.log(2);
    }, 1000)
}

// 즉시 실행 함수(IIFE)
(function f3() {
    f1()
    f2()
})()

- 각 함수를 호출 놓고 실행이 되던지 말던지 관심없는 전형적인 비동기 예제이다.

Ex01 실행결과

Ex02. Promise()를 사용하여 Ex01 예제를 동기 될 수 있도록 한 예제

function f1() {
    return new Promise((r1, r2)=>{
        setTimeout(() => {
            console.log(1);
            r1();
        }, 2000)
    })
}

function f2() {
    return new Promise((r1, r2) => {
        setTimeout(() => {
            console.log(2);
            r1();
        }, 1000)
    })
}

(function f3() {
    f1()
    .then(() => {
        f2()
    }) 
    
})()

Ex02 실행결과

Ex03. <Ex02>의 예제와 같지만 다른 문법 사용

function f1() {
    return new Promise((r1, r2)=>{
        setTimeout(() => {
            console.log(1);
            r1();
        }, 2000)
    })
}

function f2() {
    return new Promise((r1, r2) => {
        setTimeout(() => {
            console.log(2);
            r1();
        }, 1000)
    })
}

// (function f3() {
//     f1()
//     .then(() => {
//         f2()
//     }) 
    
// })() 

// <동일한 코드>
// 비동기 함수로 선언했는데 안에서는 동기화를 하고 있다.
// 안에는 비동기 함수가 있다. 기다렸다가 동기화 시켜라고 이해
( async function f3() {
    await f1()
    await f2()
})()

async function f4() {
    await f1()
    await f2()
}

f4()

Ex03 실행결과

Ex04. 전형적인 동기화 예제

- f1()에서 r2를 호출함으로써 Error가 발생되어 다음 함수가 호출되지 않는다.

- 즉, f1()의 실행이 종료되어야 f2()가 실행 되도록 하는 동기 예제이다.

const f1 = () => new Promise((r1, r2) => {
    setTimeout(() => {
        console.log(1);
        r2('f1');
    }, 2000)
})

function f2() {
    return new Promise((r1, r2) => {
        setTimeout(() => {
            console.log(2);
            r1();
        }, 1000)
    })
}

( async function f3() {
    await f1()
    await f2()
})()
.catch((n)=> {
    console.log(n,'Error');
})

 

 

2019.08.20(화)

JS - Promise() 복습