promise
promise란 fetch에서 작성한 것처럼 두개의 메소드를 가지고 비동기적 작업을 표준화 시킬수 있어서 사용한다고 했었다
이번에는 promise에 대해 자세히 적어볼려고 한다
promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
//Promise 선언부
var promise = function (param) {
return new Promise(function(resolve,reject){
setTimeout(function(){ //대표 비동기 함수
if (param) {
resolve('해결');
}
else {
reject("실패");
}
},2000);
});
};
//실행부
promise(parm) // true or false
.then(function(text){
console.log(text,'then');
})
.catch(function(error){
console.log(error,"catch");
})
</script>
위 코드를 실행하면 실패 catch가 콘솔에 출력된다 만약 promise실행 부분에 true가 파라미터로 주어졌으면 해결 then이 출력 되었을 것이다
promise 선언부
프로미스는 말 그대로 약속이며 나중에 값을 준다는 약속이다 프로미스는 3가지 상태를 가지고 있다
pending
아직 약속을 진행중인 상태(fuilled, rejected 이전의 상태)
new Promise()를 선언하면 이 상태fulfilled
콜백함수의 인자 resolve를 실행하면 이행(fullfilled)상태가 된다 이상태가 된다면
then()을 이용하여 처리 결과 값을 받을 수 있다 콜백 함수의 인자인 resovle가 실행되어 ‘해결’이 결과 값이 된다rejected
reject가 실행되어 상태는 실패이고
catch()를 이용해서 처리 결과 값을 받을 수 있다
위 코드에서 promise가 생성되고 resolve나 reject가 호출되기 전까지가 pending상태이다
promise 실행부
실행부 코드를 보면 promise()를 호출하면 Promise객체가 리턴된다 정상적으로 비동기 작업이 완료 되었다면 호출하는 then이 있고 에러가 발생하면 (reject가 실행) catch로 에러를 처리할 수 있다
promise 연결하기 (promise chaining)
프로미스는 여러개의 프로미스를 연결하여 사용할 수 있다 then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Promise(function(resolve, reject){
setTimeout(function() {
resolve(1);
}, 2000);
})
.then(function(result) {
console.log(result); // 1
return result + 10;
})
.then(function(result) {
console.log(result); // 11
return result + 20;
})
.then(function(result) {
console.log(result); // 31
});
promise객체를 반환하므로 그뒤에 then을 다시 이용할 수 있다 따라서 위 코드는 2초후 1이 출력되고 또 2초 후에 11 다은 2초후에 31이 출력된다
promise 모두 완료시 실행 (promise.all)
여러개의 비동기 작업이 존재하고 모든 작업이 완료되었을때 작업을 진행시킬려면 promise.all을 사용하면 된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var promise1 = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("첫번째 Promise 완료");
resolve("11111");
}, Math.random() * 20000 + 1000);
});
var promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("두번째 Promise 완료");
resolve("222222");
}, Math.random() * 10000 + 1000);
});
Promise.all([promise1, promise2]).then(function (values) {
console.log("모두 완료됨", values);
});
promise1과 promise2가 완료 되야지만 Promise.all이 실행된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var promise1 = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("첫번째 Promise 실패");
reject("11111"); //reject를 반환
}, Math.random() * 20000 + 1000);
});
var promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("두번째 Promise 완료");
resolve("222222");
}, Math.random() * 10000 + 1000);
});
Promise.all([promise1, promise2]).then(function (values) {
console.log("모두 완료됨", values);
});
만약 둘중 하나가 실패하면 화면과 같이 나탄난다
