[Node] callback, Promise, Async & Await

1. callback 함수

- callback 함수는 함수를 매개변수로 넘기고 그 안에서 함수를 호출하는 함수이다.

- callback 함수가 많이 중첩되게 되면 가독성 뿐만 아니라 문법이 복잡하게 된다.

전통적인 콜백 방식(콜백 지옥)

callback((a) => {
	var b = a + 1;
	callback((b) => {
		var c = b + 3;
		callback((c) => {
			var d = c + 5;
		}
	}
}

콜백함수 예시

callback: () => {
    console.log("callback start!!!");

    let count = 0;

    // start 이후 setTimeout()이 바로 실행은 되지만 log는 1초 후에 나오므로
    // 먼저 end가 나온 후에 log들이 나온다.
    // callback 함수 시작 후 1초 뒤에 시작하는 함수
    setTimeout(() => {
        count = count + 1;
        console.log("1초 후에 시작하는 함수!!! ====> count = " + count);
        
        // 첫번째 setTimeout() 함수 실행 후 1초 뒤에 시작
        setTimeout(() => {
            count = count + 1;
            console.log("1초 후에 시작하는 함수!!! ====> count = " + count);
            
             // 두번째 setTimeout() 함수 실행 후 1초 뒤에 시작
            setTimeout(() => {
                count = count + 1;
                console.log("1초 후에 시작하는 함수!!! ====> count = " + count);
            }, 1000)
        }, 1000)
    }, 1000)

    console.log("callback end!!!!");
},

callbackFunc: () => {
    console.log("callback start!!!")

    let count = 0;

    const myCounter = (callback) => {
        setTimeout(() => {
            count = count + 1;
            console.log("1초 후에 시작하는 함수!!! ===> count = " + count);
            callback();
        }, 1000)
    }

    myCounter(() => {
        myCounter(() => {
            myCounter(() => {
                console.log("callback final!!!!!")
            })
        })
    })

    console.log("callback end!!!!")
},

예시 결과

2. Promise

- 프로미스는 자바스크립트에서 비동기 작업을 쉽게 할 수 없는 단점을 보완하여 비동기 작업을 조금 편하게 할 수 있도록 ES6에 도입된 기능이다.

- 그뿐만 아니라 위처럼 콜백함수가 여러개 중첩되어 있을 때 좀 더 편리하게 해준다.

- 정상적인 결과 반환은 resolve로, 오류에 대한 결과 반환은 reject로 한다.

- 그리고 나중에 사용할 때 정상적인 결과는 then으로 오류에 대한 결과는 catch로 한다.

기본 문법

// 기본 문법
const myPromise = new Promise((resolve, reject) => {
    // 구현...
    // 정상적인 결과 반환은 resolve ======> then
    // 오류에 대한 결과 반환은 reject ======> catch
})

// 프로미스 방식 문법
const myPromise = new Promise((resolve) => {
    resolve(sum)
})

myPromise.then((result) => {

})

// 비동기 방식의 callback n개를 실행하는 경우
promise().then(() => {
    return promise();
}).then(() => {
    return promise();
}).then(() => {
    return promise();
})

// 위와 같은 의미
var one = promise.then(() => {})
var two = one.then(() => {})
var three = two.then(() => {})

프로미스 예시

promise: () => {
    const myPromise = new Promise((resolve) => {
        setTimeout(() => {
            let sum = 10;
            resolve(sum);
        }, 1000)
    })

    console.log("promise start!!!");
    myPromise.then((result) => {
        console.log("========> 1초후에 시작하는 함수");
        console.log(result);
    })
},

promiseCatch: () => {
    const myPromise = (a, b) => new Promise((resolve, reject) => {
        setInterval(() => {
            if(b === 0) {
                reject("0으로 나눌 수 없습니다.");
            } else {
                resolve(a/b);
            }
        }, 1000)
    })

    myPromise(10,0).then(result => {
        console.log(result);
        console.log("promise end!!!");
    }).catch(error => {
        console.warn(error);
        console.log("promise catch!!!!")
    })
},

promiseThen: () => {
    const myPromise = (count) => new Promise((resolve) => {
        setTimeout(() => {
            resolve(count + 1);
        }, 1000)
    })

    myPromise(0).then(count => {
        console.log("1초 후에 시작하는 함수 ====> count " + count);
        return myPromise(count)
    }).then(count => {
        console.log("1초 후에 시작하는 함수 ====> count " + count);
        return myPromise(count)
    }).then(count => {
        console.log("1초 후에 시작하는 함수 ====> count " + count);
        return myPromise(count)
    })
},

예시 결과

promise()

promiseCatch()

promiseThen()

3. Async & Await

- 프로미스를 사용할 때도 then을 사용하는 방식이 가독성이 떨어지고 여러개를 사용할 경우에는 더욱더 문법이 복잡한 문제가 있다.

- 이를 좀더 편리하게 해결하고자 생겨난 문법이 async/await이다.

- 즉, async 및 await라는 문법을 통해 프로미스를 좀 더 편하게 할 수 있다.

- await를 적은 함수에 async를 꼭 붙어줘야 한다.

기본적인 문법

async function func() {
    let value = await promise();
}

or

async () => {
    let value = await promise();
}

// 여러개의 프로미스를 사용할 경우
async() => {
    let value1 = await promise();
    let value2 = await promise();
    let value3 = await promise();
}

Async & Await 예시 

promiseAsync: async () => {
    const myPromise = (count) => new Promise((resolve) => {
        setTimeout(() => {
            resolve(count + 1)
        }, 1000);
    })

    // let res1 = await myPromise(0);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res1);
    // let res2 = await myPromise(res1);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res2);
    // let res3 = await myPromise(res2);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res3);

    let res = 0;

    // res = await myPromise(res);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);
    // res = await myPromise(res);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);
    // res = await myPromise(res);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);
    // res = await myPromise(res);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);
    // res = await myPromise(res);
    // console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);

    for(let i = 0; i < 10; i++) {
        res = await myPromise(res);
        console.log("1초(대기한다) 후에 결과를 받는다. ====> count = " + res);
    }
}

예시 결과