728x90
JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.
이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.
Promise란?
Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업을 수행
let success = true;
if (success) {
resolve("작업이 성공적으로 완료되었습니다.");
} else {
reject("작업에 실패했습니다.");
}
});
myPromise에서 new Promise()를 사용하여 새로운 Promise 객체를 생성합니다.
이때 매개변수로는 resolve(성공)와 reject(실패)를 받습니다.
- resolve: 비동기 작업이 성공적으로 끝났을 때 값이 전달됩니다. 이후 .then()이 사용가능합니다.
- reject: 비동기 작업 중 오류가 발생했을 때 호출됩니다. 이후 .catch()가 사용가능합니다.
Promise 사용예시
const fetchData = () => {
return new Promise((resolve, reject) => {
let dataFetched = true; // 데이터가 잘 받아졌다고 가정
if (dataFetched) {
resolve("데이터를 성공적으로 받았습니다.");
} else {
reject("데이터를 받는 데 실패했습니다.");
}
});
};
fetchData()
.then((result) => {
console.log(result); // 성공적으로 데이터를 받았을 때 실행
})
.catch((error) => {
console.error(error); // 실패했을 때 실행
});
new Promise()로 객체를 생성합니다.
그리고 값이 성공일시 .then()이 실행됩니다. 실패일시 .catch()가 실행됩니다.
Promise로 비동기 작업을 처리할 때 resolve와 reject를 사용하여 성공시와 실패시의 작업을 처리하고, 이후 .then()과 .catch()를 사용하여 작업을 이어갈 수 있습니다.
728x90
'웹개발 > JavaScript' 카테고리의 다른 글
undefined가 나타나는 세 가지 경우 (0) | 2024.11.12 |
---|---|
콜백(CallBack)함수 이거 보고도 모르면 바보 (0) | 2024.11.12 |
JavaScript 함수의 호이스팅 (0) | 2024.11.12 |
null의 typeof가 object인 이유 (0) | 2024.11.12 |
JavaScript, NaN 뭔지는 알고 있자 (0) | 2024.11.12 |