Promise

자바스크립트는의 비동기 처리에 사용되는 자바스크립트 내장 객체이다.
Promise는 정해진 기능을 수행하고 난 이후 정상적으로 기능이 수행됐다면 성공적인 결과값을 전달해주고 예상치 못한 문제로 인해 에러가 발생한다면 에러를 리턴한다.

Promise State

Promise의 비동기 처리에는 생성부터 종료시점 까지 3가지의 상태가 있다.

Pending(대기) -> Fulfilled(이행) 혹은 Rejected(실패)

Promise 만들기

const promise = new Promise((resolve, reject){
	console.log("Promise")
});

new Promise가 생성되는 순간 콜백 함수인 executor 함수가 자동적으로 바로 실행된다.

new 키워드로 Promise를 생성하여 호출하면 Pending(대기) 상태가 된다.
new Promise() 메소드를 호출할 때 콜백 함수를 선언 할 수 있고 인자는 resolve, reject이다.
resolve를 실행하게 되면 Pending(대기) => Fulfilled(이행)상태로 변하게 된다.
reject를 실행하게 되면 Pending(대기) => Rejected(실패)상태로 변하게 된다.

Promise 사용하기

resolve가 된 이후 처리된 결과를 then을 통해 받아올 수 있다.

const promise = new Promise((resolve, reject){
	console.log("Promise");
    setTimeout(() => {
    	resolve('jin');
    }, 2000);
});

promise.then((value) => {
	console.log(value);
})

해당코드는 promise가 정상적으로 수행되고 resolve 콜백 함수를 통해 전달한 값을 value 파라미터로 받아 값을 출력한다.

const promise = new Promise((resolve, reject){
	console.log("Promise");
    setTimeout(() => {
    	reject(new Error('에러발생`);
    }, 2000);
});

promise.then((value) => {
	console.log(value);
})
.catch(error => {
	console.log(error);
}

네트워크 통신에 실패하거나 하는 경우 reject 실행을 위한 코드가 작성되어야 한다. 바로 catch 메소드를 통해 예외 처리를 할 수 있다.

const promise = new Promise((resolve, reject){
	console.log("Promise");
    setTimeout(() => {
    	resolve('jin');	
        // reject(new Error('에러발생`);
    }, 2000);
});

promise.then((value) => {
	console.log(value);
})
.catch(error => {
	console.log(error);
}
.finally(() => {
	console.log('finally');
}),

finally 메소드를 사용한 경우에는 resolve , reject 어떤 것이 실행되도 같이 값이 출력된다.

Promise.all

여기 3개의 함수가 있고 각각의 소요 시간이 다르다.

const f1 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료")
    }, 1000)
  })
}

const f2 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료")
    }, 2000)
  })
}

const f3 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료")
    }, 3000)
  })
}

f1().then((res) => f2(res))
.then((res) => f3(res))

이와 같이 then 체이닝 방식으로 진행했을 때 총 소요시간은 6초가 걸린다.

여기서 Promise.all을 사용한다면 시간을 단축시킬 수 있다.

console.time("x")
Promise.all([f1(),f2(),f3()])
.then((res) => {
  console.log("모든 주문 완료")
  console.timeEnd("x")
})

// 소요시간은 대략 3초가 걸리고 "모든 주문 완료"라는 메세지를 반환한다.

이와 같은 결과가 나온 이유는 Promise.all 배열 안의 함수를 모두 병렬로 비동기 함수를 실행 시키기 때문이다.

그래서 배열 안의 어떤 함수가 에러를 반환하게 되면 그 반환 시점을 기준으로 동작이 종료되어 더 빠르게 에러를 반환하고 어떠한 응답(res) 값도 얻지 못한다!