promise란?
자바스크립트의 callback Hell 문제를 해결하기 위해 사용합니다. 하지만 그 외에도 비동기 프로그래밍을 하면서 사용하기 어렵게 된 throw와 return을 사용할 수 있게 해줍니다.
Promise.prototype.then()
then() 메서드를 사용하게 되면 Promise를 리턴하게 되고 성공했을 때 실행되는 콜백함수 resolve, 실패했을 때 실행되는 콜백 함수 reject 를 인수로 받습니다.
var promise1 = new Promise(function(resolve, reject) {
resolve("success!");
// 또는
// reject ("error!");
});
promise1.then(function(data) {
console.log(data); // 성공!
}, function(error) {
console.log(reason); // 오류!
});
위의 개념을 이용하여 chaining 개념을 잡을 수 있습니다.
var promise2 = new Promise(function(resolve, reject) {
resolve(1);
});
promise2.then(function(data) {
console.log(data); // 1
return data + 1;
}).then(function(data) {
console.log(data); // 2
});
promise2.then(function(data) {
console.log(data); // 1
});
Promise.resolve(data)
Promise.prototype.then()에서 인자로 받았던 resolve, reject 중 Promise.resolve 함수를 사용하게 되면 결정된 Promise를 반환합니다.(즉, reject 부분은 무시하게 됩니다.)
Promise.resolve("sucess").then(function(data) {
console.log(data); // "Success"
}, function(error) {
// 호출되지 않음
});
Promise.reject(error)
Promise.resolve 와 마찬가지로 거부된 Promise를 반환하게 하여 resolve 부분을 무시하게 합니다.
Promise.reject("test promise reject").then(function(reason) {
// 호출되지 않음
}, function(reason) {
console.log(reason); // "test promise reject"
});
Promise.prototype.catch()
catch() 는 거부된 Promise를 반환받게 되었을 때 실행됩니다.
var promise1 = new Promise(function(resolve, reject) {
resolve('success');
});
promise1.then(function(data) {
console.log(data); // "success!"
return Promise.reject('reject');
}).catch(function(e) {
console.log(e); // "reject"
});
promise는 비동기 콜백 내에서 발생한 오류는 잡을 수 없습니다. 즉, 직접적으로 Promise 스코프에 있는 Error 처리만 잡을 수 있습니다.
var promise1 = new Promise(function(resolve, reject) {
throw 'reject error in promise1';
});
promise1.catch(function(e) {
console.log(e); // "reject error in promise1"
});
var promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
throw 'reject error in async callback function';
}, 1000);
});
p2.catch(function(e) {
console.log(e); // 이는 전혀 호출되지 않음
});
Promise.all(iterable)
인자로 Promise 값들로 이루어진 배열을 받아 resolve 된 Promise 값으로 이루어진 배열을 반환합니다.
var promise1 = Promise.resolve(1);
var promise2 = 2; // Promise가 아닌 값은 자동으로 Promise.resolve 값으로 계산
var promise3 = new Promise(function(resolve, reject) {
resolve(3);
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values); // [1, 2, 3]
});
만약 전달 된 배열 중에서 Promise 값들 중 하나라도 reject 되면 Promise.all은 reject 된 Promise를 반환하게 됩니다.
var promise1 = Promise.resolve(1);
var promise2 = 2;
var promise3 = new Promise(function(resolve, reject) {
reject("reject");
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values); // [1, 2, 3]
})
.catch(function(error) {
console.log(error);
});