[Javascript] 프라미스 체이닝(Promise Chaining)

프라미스 체이닝

순차적으로 처리해야 하는 비동기 작업이 여러개 있을 시 아래와 같이 프라미스 체이닝을 사용하여 작업을 할 수 있음

let myPromise = new Promise((resolve,reject) => {
	setTimeout(() => resolve(20),500); // 1
});

myPromise
.then(res => { // 2
	
    console.log(res);
    return res+res;
})
.then(res => { // 3
	
    console.log(res);
    return res+res;
})
.then(res => { //4
	
    console.log(res);
})

 

결과

then 핸들러를 사용하면 프라미스를 반환하기 때문에 체인처럼 계속해서 .then 을 사용하며 원하는 순서대로 비동기 작업을 처리할 수 있음.

 

return 값이 다음의 .then 사용 시 전달되기 때문에 가장 상위의 1번 프라미스에서 20을 전달하고 2번 then에서 result + result인 40 -> 3번에서 80을 리턴하고 결과적으로 체인의 끝인 4번에서 80의 값을 받게 됨.

 

 

프라미스 반환

then 핸들러의 리턴값을 프라미스로 주는 방식으로도 비동기 처리를 할 수 있음.

 

이경우 다음 then은 리턴되는 프라미스가 처리된 후 실행됨.

let myPromise = new Promise((resolve,reject) => {
	setTimeout(() => resolve(20),500); // 1
});

myPromise
.then(res => { // 2
	
    console.log(res);
    return new Promise((resolve,reject) => {
		
        resolve(res+res);
    });
})
.then(res => { // 3 res에 Promise 가 반환되는게 아닌 resolve에서 반환된 값인 res+res
	
    console.log(res);
    return new Promise((resolve,reject) => {
		
        resolve(res+res);
   });
})
.then(res => { //4
	
    console.log(res);
})

 

결과

 

참조: https://ko.javascript.info/promise-chaining