JavaScript #Promise( Chaining, state)

JohnKim·2021년 8월 13일

JavaScript

javascript

목록 보기

22/26

⛓ Promise Chaining ⛓

- 순차적으로 처리해야하는 비동기 작업이 여러개 있는 경우가 많다.

- 각각의 작업이 이전 단께 비동기 작업이 성공하고 나서 그 결과 값을 이용하여 다음 비동기 작업을 실행해야 하는 경우

getProducts()   // 상품 가져오고
	.then(getComments)   // 그리고 후기 가져오고
	.then(getLikes)   // 그리고 좋아요 가져오고

위의 로직은 이전에 프로젝트 하면서 fetch를 통해 데이터를 가져오고, 데이터를 가져오는것에 성공했다면 그다음 then을 통하여 다른 작업을 하는 로직과 같은 방식이다.

then 의 callback 반환 값 💰

위에서 간단하게 설명한 then의 콜백함수는 여러 타입의 값을 반환할 수 있다.

1. 값 반환

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);
    }, 1000);
});

promise
	.then(function(first) {
	  console.log('first', first);
	  return 2;
	}).then(function(second) { 
		console.log(second);
	});

첫번째 then에서 2를 return 하였는데,

그다음 then이 2를 인자로 넘겨 받아 사용을 하게된다.( second가 2가 된다!!)

값을 반환하지 않는 경우 ❌ : undefined를 결과값으로 하여 이행

2. promise 반환

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);   // part.1
    }, 1000);
});

promise
	.then(function(first) {  
	  console.log('first', first);  //part.2
	  return 2;     
	})
	.then(function(second) { 
		console.log('second', second);  //part.3
		
		return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(3);
        }, 1000);
    });
	})
	.then(function(third) {
		console.log('third', third); //part.4
	});

👇조금 헷갈릴 수 있어서 실행순서를 나열해 보았다.

실행순서

part.1
1초의 대기시간이 지난후 resolve를 호출한다.

part.2
console 1을 찍고 곧바로 2를 return하여 다음 then의 인자로 넘겨준다.

part.3
console 2를 찍고 새로운 promise 를 생성하는데 그 안에는 1초에 대기시간을 갖고 resolve가 3의 인수를 가지고 있다.

part.4
위에 then에서 반환하는 resolve가 then의 콜백함수가 된다.

✅ part.4의 then()안에 콜백함수가 part.3의 promise의 resolve이다.

주의할점 ❌

promise 하나에 .then을 여러 개 추가한 후, 이를 체이닝이라고 착각하는 경우가 있다. 하지만 이는 체이닝이 아니다!

let promise = new Promise(function (resolve, reject) {
 setTimeout(() => resolve(1), 1000);
});

promise.then(function (result) {
 console.log(result); // 1
 return result * 2;
});

promise.then(function (result) {
 console.log(result); // 1
 return result * 2;
});

promise.then(function (result) {
 console.log(result); // 1
 return result * 2;
});