Asynchronous 1 (콜백함수, 프로미스)
아래 예시 코드는 숫자 n을 매개 변수(parameter)로 받아와 5번에 걸쳐 1초마다 1씩 더해서 출력하는 비동기 작업
1. 콜백 함수 (callback)
const increaseAndPrint = (n, callback) => {
setTimeout(() => {
const increased = n + 1;
console.log(increased);
if (callback) {
callback(increased);
}
}, 1000);
}
increaseAndPrint(0, n => {
increaseAndPrint(n, n => {
increaseAndPrint(n, n => {
increaseAndPrint(n, n => {
increaseAndPrint(n, n => {
console.log('The End');
});
});
});
});
});
// 1
// 2
// 3
// 4
// 5
// The End
setTimeout()
은 비동기적 코드를 만들기 위해 사용하는 것 뿐이다.- 비동기 처리가 많아질수록 코드가 깊어지는 현상을
콜백 지옥(callback hell)
이라고도 한다. - 이렇게 코드가 깊어지는 것은
프로미스(Promise)
를 사용하여 줄일 수 있다.
2. 프로미스 (Promise)
const increaseAndPrint = (n) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const value = n + 1;
if (value === 5) {
const error = new Error();
error.name = 'The End';
reject(error);
return;
}
console.log(value);
resolve(value);
}, 1000);
});
}
increaseAndPrint(0)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch(error => {
console.log(error);
});
// 1
// 2
// 3
// 4
// The End
프로미스(Promise)
를 사용할 때, 실행 함수는 프로미스를이행(resolve)
또는거부(reject)
할 수 있다.프로미스(Promise)
를 이행했을 때는then()
으로 호출을 정의하고, 거부했을 때는catch()
로 호출을 정의한다.거부(reject)
의 상황에서catch()
를 통해 에러를 출력하기 위해서,new Error()
를 사용하여 에러를 만들었다.프로미스(Promise)
를 사용함으로써콜백 함수(callback)
를 사용했을 때 코드가 깊어지던 현상을 극복할 수 있었다.프로미스(Promise)
의 최대 장점으로는 chaining을 꼽을 수 있다.- 참고로 단점으로는 에러를 잡을 때 어디에서 에러가 발생했는지 알아내기가 어렵다.
.then(increaseAndPrint)
은.then(n => { return increaseAndPrint(n) }
을 줄여서 작성한 것이다.
Author And Source
이 문제에 관하여(Asynchronous 1 (콜백함수, 프로미스)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qkrcndtlr123/callbackandpromise저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)