TIL. Promise Chaining

배상건·2022년 2월 25일
0

TIL

목록 보기
3/15
console.log('Coding!');

fetch('https://velog.io/@sg_yksv77')
	.then((response) => response.json())
	.then((result) => { console.log(result); });

부족한 개념 확인

  1. 콜백 함수가 리턴한 결과가 then 메소드가 반환하는 promise 객체에 어떤 영향을 주는지
  2. Promise Chaining의 의미

먼저, promise chaining은 두 가지 특징이 있는데,
then 메소드는 각각 별개의 promise 객체를 리턴한다.
이렇게 promise 객체의 then 메소드가 새로운 promise 객체를 리턴하기 때문에,
then 메소드 뒤에, 다시 then 메소드를 붙여 나갈 수 있다.

문제 해결

1. 콜백함수가 1) promise 객체를 리턴하는 경우, 2) promise 객체가 아닌 값을 리턴하는 경우에 따라 then 메소드가 리턴하는 Promise 객체에 영향을 줄 수 있다.

then 메소드가 리턴한 promise 객체는 pending 상태로 시작된다!

fetch('https://velog.io/@sg_yksv77')
	.then((response) => response.json()) // promise ---- pending 

하지만!
이후에 then 메소드로 등록한 콜백이 실행되고 콜백에서 '어떤 값'을 리턴하면,
then 메소드가 리턴했던 promise 객체가 영향을 받게 된다.

이때, 콜백에서 어떤 값을 리턴하느냐에 따라서 받는 영향이 달라진다.

1) promise 객체를 리턴하는 경우

fetch('https://velog.io/@sg_yksv77')
	// 콜백: promise 리턴 
	.then((response) => response.json())

then 메소드가 리턴한 promise 객체는
콜백에서 리턴하는 promise 객체와 동일한 '상태와 작업 성공 결과'를 갖게 된다.

만약, 콜백에서 리턴하는 promise 객체가 fulfilled 상태가 되면,
then 메소드가 리턴한 promise 객체도 fulfilled 상태가 되면서,
동일한 작업 성공 결과를 갖게 된다.

나아가, 콜백에서 리턴하는 promise 객체가 rejected 상태가 되면,
then 메소드가 리턴한 promise 객체도 rejected 상태가 되면서,
동일한 작업 실패 정보를 갖게 된다.

2) promise 객체가 아닌 값을 리턴하는 경우

fetch('https://velog.io/@sg_yksv77')
	// 콜백: 숫자, 문자열, 일반 객체 리턴
	.then((response) => return 2)

!!! 복습하기 전, 매번 헷갈렸던 개념 !!!

콜백이 리턴하는 값이 promise 객체가 아닌,
숫자, 문자열, 일반 객체 등 이라면 어떻게 될까?

콜백이 promise 객체가 아닌 다른 값을 리턴할 때,
1) then 메소드가 리턴한 promise객체는 fulfilled 상태가 되고,
2) 콜백이 리턴한 값을 작업 성공 결과롤 갖게 된다.

2. Promise Chaining 이란?

각각 별개의 promise 객체를 리턴하는 then 메소드를 사용하여,
작성된 순서에 따라 then 메소드로 등록된 콜백이 순서대로 실행되는 것이 Promise Chanining 이라고 할 수 있다.

이때, 주의 해야하는 것은
1) then 메소드로 리턴하는 promise 객체는 항상 시작을 pending 상태에서 시작하며,
2) 콜백이 리턴하는 값이 Promise 객체인지, 아닌지에 따라 then 메소드의 작업 성공 결과 혹은 작업 실패 정보가 결정된다.

참고: 코드잇

profile
목표 지향을 위해 협업하는 개발자

0개의 댓글