Web・API - 2021. 11. 9.

Promise Chaining 프로미스 체인 쓰는 이유#4

Promise Chaining 프로미스 체인 쓰는 이유(Promise 동작원리)

안녕하세요 TriplexLab 입니다.
오늘은 Promise Chaining을 왜 사용하는지 주제로 이야기를 해보도록 하겠습니다.

🎯 then 메소드 뒤에는 계속해서 then 메소드를 연달아 붙일수 있는 사황

아래코드를 자세히 보면

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
	.then((response) => response.text())
	.then((result) => {
		const users = JSON.parse(result);
		return users[0];
	})
	.then((user) => {
		console.log(user);
		const {address} = user;
		return address;
	})
	.then((address) => {
		console.log(address);
		const {geo} = address;
		return geo;
	})
	.then((geo) => {
		console.log(geo);
		const {lat} = geo;
		return lat;
	})
	.then((lat) => {
		console.log(lat);
	});

console.log('End');

위와과 같은 코드를, 다음과 같은 코드로 바꿀수도 있습니다.
굳이 여러게의 then메소드를 쓸 필요없이 필요한 코드를 쭉 써도 되는 거죠!

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.text())
.then((result) => {
	const users = JSON.parse(result);
	const user = users[0];
	console.log(user);
	const {address} = user;
	console.log(address);
	const {geo} = address;
	console.log(geo);
	const {lat} = geo;
	console.log(lat);
});

console.log('End');

동일한 결과가 잘 출력됩니다.

그렇다면 Promise Chaining은 어떤 경우에 하면 되는걸까요?

🎯 어떤 경우에 Promise Chaining이 필요한지

결론부터 말하면 비동기 작업을 순차적으로 실행하기 위해서 Promise Chaining을 한다고 말 할수 있습니다.

다음 코드를 자세히 봅시다. 👇
지금 2번째 then메서드 콜백에서는 2번째 fetch함수가 리턴하는 Promise 객체를 리턴하고 있습니다.
이렇게 then메서드 안에 콜백에서 Promise 객체를 리턴하면
then메소드가 리턴했던 Promise 객체도 콜백에서 리턴한 Promise 객체와 똑 같은 상태와, 결과를 갖게 됩니다.