[javascript] Promise(1) - then(), catch(), finally(), resolve(), reject()

- 자바스크립트는 기본적으로 동기로 실행한다. (실행이 끝나야 다음 코드 실행)

- Promise 는 비동기로 처리한다.

- 코드를 연속으로 처리하지 않고 중간에 흐름이 끊어졌다가 연결된 코드를 처리할 수 있는 환경이 되었을 때 실행하겠다고 약속하는 느낌 (시멘틱)

 

[ Promise 처리 흐름 ]

const obj = new Promise((resolve, reject) => {	// pending 상태
	resolve();
    log("Promise");
});
obj.then((value) => {	// settled 상태
	log("success");
}, (reason) => {
	log("fail");
});
	log("last");

위 코드 결과

Promise last  success

[ Promise 상태 ] 

1. Pending

- new Promise() 로 인스턴트 생성 

 

2.Settled (fulfilled, rejected)

- Pending 이 종료된 상태를 나타내고 fullfilled, rejected 상태로 구분된다. 

- 바인딩한 함수가 호출된다.

- fullfilled: then() 의 첫번째 함수 호출 

- rejected: then() 의 두번째 함수 호출

 

 

then() 

- 성공과 실패 핸들러 함수를 작성한다. 

- 값은 반환하지 않고 Promise 인스턴스를 반환한다.

- 첫번째 파라미터: 성공일때 실행될 핸들러 함수 

- 두번째 파라미터: 실패일때 실행될 핸들러 함수 

 

then() 의 return 값

-  then() 에서 Promise 인스턴스를 반환한다.

- return 값을 반환하지 않는다. 

- Method chain 에서 this 를 return 하는 것과 같은 개념으로 then().then() 형태로 then() 을 연속해서 호출할 수 있다. 

- return 값을 [[PromiseValue]] 에 설정하고 [[PromiseValue]] 값을 다음 then() 의 파라미터 값으로 넘겨준다. 

const obj = new Promise((resolve, reject) => {
	resolve(100);
});
obj.then((value) => {	// value = 100
	return value + 50;	// 150 을 반환하지 않고 인스턴스를 반환한다. ([[PromiseValue]]에 설정)
    				// 만약 return 을 작성하지 않으면 undefined 를 [[PromiseValue]] 에 설정
}).then((param) => {	// param 에 [[PromiseValue]] 값인 150 이 설정
	log(param); // 150 출력
 });

실행결과

150

 

 

catch()

- reject 의 핸들러 함수를 작성한다. 

- then() 의 두번째 파라미터를 작성하지 않고 대신에 catch(param) 을 작성한다. 

- return 문의 표현식 평가 결과를 [[PromiseValue]] 에 설정한다.

 

catch() 의 return 값

- Promise 인스턴스를 반환하기 때문에 catch().then() 처럼 이어서 then() 을 호출할 수 있다.

- [[PromiseValue]] 값을 then() 의 파라미터 값으로 넘겨준다.

const check = false;
const obj = new Promise((reslove, reject) => {
	resolve(100);	// then() 의 첫번째 파라미터 호출됨
});
obj.then((value) => { 
	throw "error";		//error발생 [[PromiseValue]] 에서 "error" 설정됨
}).catch((catch1) => { 	// 위 에러 여기서 받음
	log("catch1:" + catch1);
    return "정상";	// 에러가 발생해 catch이 실행됐지만 catch 에서 에러가 발생하지 않으면 바로 아래의 then()이 실행된다.
  }).then((param) => {
  	log("then:" + param); // 여기서 에러가 발생하지 않아 밑에 catch문은 실행되지 않고 promise 처리가 끝이 난다.
  }).catch((catch2) => {
  	log("catch2:" + catch2);
  });
    });

실행결과

catch1:error then:정상

 

 

finally() *ES2018 부터 지원 

- 성공 실패 관계없이 파라미터의 핸들러 함수가 실행된다.

- 핸들러 함수에 파라미터가 없다.

- then(), catch() 의 같은 코드를 finally() 에 작성하면 코드 중복을 피할 수 있다.

const obj = new Promise((resolve, reject) => {
	resolve(100);	// then 함수 호출
});
obj.then((value) => { 
	log(value);
    return 200;		// [[PromiseValue]] 에 200 설정
}).catch((reason) => {
	log(reason);
}).finally((param) => {	// 문법적으로 param 파라미터 사용하지 않음 [[PromiseValue]] 
	log("finally:" + param);
});

실행결과

100 finally:undefined

 

resolve()

- 성공상태의 Promise 인스턴스를 생성하여 반환한다.

- Promise.resolve() 형태로 작성한다.

- 파라미터 값에 따라 생성방법이 다르다.

* 파라미터에 값을 작성하면 파라미터값으로 Promise 인스턴스를 생성하여 반환

* 파라미터에 Promise 인스턴스를 작성하면 파라미터의 Promise 인스턴스의 값을 사용하여 Promise 인스턴스를 생성하여 반환 

const obj = Promise.resolve("test");	// new 를 사용하지 않지만 promise 인스턴스를 생성해서 반환한다.
obj.then((value) => {
	log(value);
});
log("end");

실행결과

end test

 

thenable

- Promise.resolve() 의 파라미터에 then() 을 작성한 형태

const obj = Promise.resolve({
	then(resolve, reject){
    	resolve([1,2]);
    }
});
obj.then((value) => {
	log(value);
});
log("끝");

 

reject() 

- 실패 상태의 Promise 인스턴스를 생성하여 반환한다.

- Promise.reject() 형태로 작성한다.

- 파라미터에 reject 사유를 작성한다.

 

const obj = Promise.reject("fail"); // 실패상태이므로 then의 두번째 파라미터함수가 호출된다.
obj.then(
	(value) => log(value),
    (value) => log(value)	// fail
);