promise - 1 [then, catch, resolve, reject]

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);
});