function job1(){
return new Promise(function(resolve, reject){
setTimeout(function(){
reject('job1 failed!');
}, 2000);
});
}
function job2() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('job2 resolved!');
}, 2000);
});
}
- job1 함수는 new Promise 함수의 결과를 return한다.
- 새로운 Promise를 선언할 때, 성공했을 때의 결과와 실패했을 때의 함수가 가져올
매개변수가 필요하므로 선언해준다.(resolve, reject) - 비동기를 적절하게 설명하기 위해 setTimeout함수를 사용하였다(불러올 함수, 시간 설정)
- 위 코드에서는 reject될 경우의 상황을 서술하고 있다.
- 새로운 Promise를 선언할 때, 성공했을 때의 결과와 실패했을 때의 함수가 가져올
- job2 함수는 동일하다.
job1().then(function(data){
console.log('data', data);
job2().then(function(data){
console.log('data2', data);
})
})
- 위에서 선언한 Promise들을 실행하는 코드이다.
- 이는 nested Promise 형태로 job1()에서 도출된 값을 data서 받아 표현한다.
- job2()는 job1()이 진행함에 따라 then 후에 실행된다.
job1()
.then(function(data){
console.log('data1', data);
return job2();
})
.catch(function(reason){
console.log('reason', reason)
return Promise.reject();
})
.then(function(data){
console.log('data2', data);
})
- 이는 chaining Promise 형태이다. 각 형태는 장.단점이 있다고 한다.
- 맨 위에 서술한 코드에 의해, 결과는 .catch()가 실행되는데,
return Promise.reject(); 함수에 의해 다음 코드가 실행되지 않는다.
'Front-end > WEB (HTML CSS JS)' 카테고리의 다른 글
[Web] express 로그인 및 로그아웃 구현 2 (연습) (0) | 2022.10.26 |
---|---|
[Web] express 로그인 구현 front 작업부분 (0) | 2022.10.23 |
[JavaScript] async & await 사용 (0) | 2022.10.14 |
[JavaScript] Promise(then, catch) (0) | 2022.10.14 |
[JavaScript] Call-Back 함수 (0) | 2022.10.11 |
댓글