반응형
Promise 특징
- Promise는 비동기적인 작업 처리를 위한 도구이다.
- Promise는 then과 catch로 사용할 수 있다.
- Promise를 반환하는 함수 자체는 동기적으로 실행되며, Promise를 반환하는 함수일 경우 비동기적으로 처리된다.
- 비동기적인 작업을 처리할 때, 작업의 성공 유무에 따라 표준화된 방식(then, catch)으로 처리할 수 있게 해주기 때문에 사용한다.
- 네이스팅 방식과 체이닝 방식이 있으며, 일반적으로 체이닝 방식을 사용한다.
Promise 만드는 법
<script>
function job1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('resolved ok!');
}, 1000);
});
}
function job2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('resolved ok 2!');
}, 1000);
});
}
// 네이스팅 방식
job1().then((data) => {
console.log('data', data)
job2().then((data) => {
console.log('data', data);
})
})
// 프라미스 체이닝 방식
job1().then((data) => {
console.log('data', data)
return job2();
}).then((data2) => {
console.log('data', data2)
})
</script>

Promise 실패 했을 때 ( reject )
<script>
function job1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('resolved ok 1!');
reject('job1 failed!');
}, 2000);
});
}
function job2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('resolved ok 2!');
}, 2000);
});
}
job1()
.then((data) => {
console.log('data', data)
return job2();
})
.catch((reason) => {
console.log('reason', reason)
return Promise.reject(reason);
})
.then((data2) => {
console.log('data', data2)
})
</script>

Promise all and race
<script>
function timer(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time);
}, time);
});
}
Promise.all([timer(1000), timer(2000), timer(3000)]).then(result => { // 배열에 모든 작업의 결과 값을 반환
console.log(result);
})
Promise.race([timer(1000), timer(2000), timer(3000)]).then(result => { // 제일 빨리 끝난 작업의 결과만 반환
console.log(result);
})
</script>

반응형
'Js > Javascript' 카테고리의 다른 글
[JS] forEach, map, filter, reduce (0) | 2023.02.22 |
---|---|
고급 예외 처리 try, catch finally (0) | 2021.07.27 |
var, let, const 키워드 (0) | 2021.07.25 |