- 프로미스는 비동기 작업을 편하게 처리할 수 있도록 ES6에 도입된 기능.
- 이전에는 비동기 작업을 끝내고 나서, 어떤 작업을 해야할 때 콜백함수로 처리를 해주었어야 했는데, 그러한 작업들이 많을 경우 여러 콜백함수로 인해 코드가 쉽게 난잡해지게 되었음
=> 이를 해결하기 위해 프로미스가 만들어짐
function 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("작업~끝!");
});
});
});
});
});
위는 콜백 지옥 예제 코드임
이러한 난잡한 코드를 개선하기 위해 프로미스가 만들어짐.
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("result");
}, 1000);
});
myPromise.then((result) => {
console.log(result);
});
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error());
}, 1000);
});
myPromise
.then((result) => {
console.log(result);
})
.catch((e) => {
console.error(e);
});
- 매개변수로 넣어주는 resolve는 성공했을때 최종결과를 반환해주는 콜백함수이고, reject는 중간에 문제가 생길 시에 호출되는 콜백함수이다.
- 성공하는 상황에서는 resolve를 사용하고, 실패하는 상황에서는 reject를 사용함
function increaseAndPrint(n) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const value = n + 1;
if (value === 5) {
const error = new Error();
error.name = "ValueIsfiveError";
reject(error);
return;
}
console.log(value);
resolve(value);
}, 1000);
});
}
increaseAndPrint(0)
.then((n) => {
return increaseAndPrint(n);
})
.then((n) => {
return increaseAndPrint(n);
})
.then((n) => {
return increaseAndPrint(n);
})
.then((n) => {
return increaseAndPrint(n);
})
.catch((e) => {
console.error(e);
});
function increaseAndPrint(n) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const value = n + 1;
if (value === 5) {
const error = new Error();
error.name = "ValueIsfiveError";
reject(error);
return;
}
console.log(value);
resolve(value);
}, 1000);
});
}
increaseAndPrint(0)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch((e) => {
console.error(e);
});
- promise를 그대로 반환하고, 파라미터도 동일하기 때문에 파라미터 넣지 않고 함수만 호출해도 됨.
- promise를 사용하면 비동기 작업이 많아져도 코드의 깊이가 깊어지지 않는다.
728x90
반응형
'Language > JavaScript' 카테고리의 다른 글
Promise.all / Promise.race (0) | 2022.11.27 |
---|---|
async, await (0) | 2022.11.27 |
Hoisting (0) | 2022.11.27 |
Scope (0) | 2022.11.27 |
함수 인자에서 rest (0) | 2022.11.27 |