Promise

의미

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
• 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체

특징

• 프로미스를 사용하면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있음
  • 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환함
• 자바스크립트 Event Loop가 현재 실행중인 콜 스택을 완료하기 이전에는 호출되지 않음
• 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백도 현재 실행중인 콜 스택을 완료하기 이전에는 호출되지 않음

Promise의 세 가지 상태

• 대기(pending): 이행(fulfiiled)하지도, 거부(rejected)하지도 않은 초기 상태
• 이행(fulfilled): 연산이 성공적으로 완료된 상태
• 거부(rejected): 연산이 실패한 상태
  
  (출처: mdn Promise)

Promise 사용하기

Promise 실행 함수의 매개변수(파라미터)

resolve

• 첫 번째 파라미터인 함수resolve는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출됨
• 비동기 작업을 성공적으로 완료하면, resolve함수의 전달인자를 값으로 반환

reject

• 두 번째 파라미터인 함수reject는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 되며, 주로 오류 객체를 받음
• 비동기 작업이 실패하면, reject함수의 전달인자를 값으로 반환

인스턴스 메소드

Promise.prototype.then()

• 프로미스에 이행과 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행
  → resolve의 전달 인자로 넣어준 값을 리턴함
• 호출되지 않을 경우(onFulfilled, onRejected중 상태에 맞는 콜백이 함수가 아닐 경우) 처리된 값과 상태 그대로 처리되는 새로운 프로미스를 반환
  
  (출처: javascriptInfo, Promise-chaing)

Promise.prototype.catch()

• 프로미스에 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행
  → reject의 전달 인자로 넣어준 값을 리턴함
• 호출되지 않을 경우(즉, 이전 프로미스가 이행하는 경우) 이행한 값을 그대로 사용해 이행하는 새로운 프로미스를 반환

Promise.prototype.finally()

• 프로미스의 이행과 거부 여부에 상관없이 처리될 경우 항상 호출되는 처리기 콜백을 추가하고, 이행한 값 그대로 이행하는 새로운 프로미스를 반환

예시

let promise = new Promise((resolve, reject) => {
// 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출
	let a = 5 + 5 //해야하는 작업
	if (a === 10) {
		resolve('Success')
	}else {
		reject('Failed')
	}
});

promise
.then((message) => {
//messages는 위에서 resolve(...) 호출에 제공한 값
	console.log('This is in the then ' + message)
})
.catch((message) => {
//messages는 위에서 reject(...) 호출에 제공한 값
	console.log('This is in the catch ' + message)
})

---

promise chain

의미

then()을 여러 번 사용해서 여러 개의 콜백을 추가하고, 각각의 콜백이 순서대로 실행하도록 일종의 체인을 만듦

예시

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // 1초 후 최초 프라미스가 실행

}).then(function(result) { //  1이 result로 전달됨

  alert(result); // 1
  console.log(result * 2) //2
  return result * 2; // 2 * 1 => 2가 리턴됨

}).then(function(result) { // 앞에서 리턴한 값인 2가 result로 전달됨

  alert(result); // 2
  console.log(result * 2) //4
  return result * 2// 2 * 2 => 4가 리턴됨

}).then(function(result) { // 앞에서 리턴한 값인 4가 result로 전달됨

  alert(result); // 4
  console.log(result * 2) //8
  return result * 2 // 4 * 2 => 8이 리턴됨

});

---

Promise 정적 메소드

Promise.all(iterable)

특징

• 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환
• 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부

매개변수

Array와 같이 순회 가능한(iterable) 객체

리턴값

• (프로미스가 아닌 값을 포함하여) 매개변수로 주어진 순회 가능한 객체에 포함된 모든 값을 담은 배열
• 빈 객체를 전달한 경우, (동기적으로) 이미 이행한 프로미스를 반환
• 전달받은 모든 프로미스가 이미 이행되어 있거나 프로미스가 없는 경우, 비동기적으로 이행하는 프로미스를 반환

예시

const promise1 = Promise.resolve('success');
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // ["success", 42, "foo"]
});

---

참고자료
mdn Promise
The Complete JavaScript Promise Guide(영어)
javascriptInfo, Promise-chaing
mdn, promise.all()