promise

자료 출처 : 한입 크기로 잘라 먹는 리액트(React.js)

pending -> fulfillled : resolve

pending -> rejected : reject

 

콜백 지옥

function taskA(a,b,cb){
	setTimeout(()=>{
		const res = a + b;
		cb(res);
},3000)
}

function taskB(a,cb){
	setTimeout(()=>{
		const res = a * 2;
		cb(res);
},1000)
}

function taskC(a,cb){
	setTimeout(()=>{
		const res = a * -1;
		cb(res);
},2000)
}

taskA(3,4,(a_res)=>{	
	console.log(a_res);
	taskB(a_res,(b_res)=>{
		console.log(b_res);
		taskC(b_res,(c_res)=>{
			console.log(c_res);
		})
	})

})

어떤 함수가 promise로 반환한다는 것은 그 함수는 비동기적으로 반환을 하고, 반환한 그 promise 객체를 이용해서 비동기 처리의 결과 값을 then, catch로 이용 할 수 있게 만들겠다.

function taskA(a,b){

	const executorA = ((resolve,reject)=>{
		setTimeout(()=>{
			const res = a + b;
			resolve(res);
		},3000)
	})

	return new Promise(executorA);
	
}

function taskB(a){

	const executorB = (resolve, reject) => {
		setTimeout(()=>{
			const res = a * 2;
			resolve(res);
		},1000)
	}

	return new Promise(executorB);
}

function taskC(a){

	const executorC = (resolve, reject) =>{
		setTimeout(()=>{
			const res = a * -1;
			resolve(res);
		},2000)
	}

	return new Promise(executorC);
	
}

taskA(5,1).then((a_res)=>{
	console.log("a_res",a_res);
	taskB(a_res).then((b_res)=>{
		console.log("b_res",b_res);
		taskC(b_res).then((c_res)=>{
			console.log(c_res);
		});
	})
})

그러나 이 코드에서도 call hell과의 모양새가 별반 다를 바가 없다.

 

then chaining을 이용해보자

taskA(5,1).then((a_res)=>{
	console.log("a_res",a_res);
	return taskB(a_res);
}).then((b_res)=>{
	console.log("b_res",b_res);
	return taskC(b_res);
}).then((c_res)=>{
	console.log("c_res",c_res);
})

또한 함수를 then을 분리해서 사용할 수 있다.

const bPromiseRes = taskA(5,1).then((a_res)=>{
	console.log("a_res",a_res);
	return taskB(a_res);
});

bPromiseRes
.then((b_res)=>{
	console.log("b_res",b_res);
	return taskC(b_res);
}).then((c_res)=>{
	console.log("c_res",c_res);
})