[JavaScript] Promise

Promise

---

Promise는 JavaScript 비동기 처리에 사용되는 객체이다. 여기서 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성이다.
프로미스는 new Promise()로 프로미스를 생성하며 Pending, Fulfilled, Rejected의 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

콜백함수를 이용해 비동기 처리의 결과를 성공과 실패로 핸들링해보자.

function isPositive(number, resolve, reject){
	setTimeout(() => {
		if(typeof number === "number"){
			// 성공 -> resolve
			resolve(number >= 0 ? "양수" : "음수");
		} else {
			// 실패 -> reject
			reject("주어진 값이 숫자형 값이 아닙니다.");
		}
	}, 2000);
}

isPositive(
	10, 
	(res) => {
		console.log("성공적으로 수행됨: ", res);
	}, 
	(err) => {
		console.log("실패하였음: ", err);
	}
);
// 성공적으로 수행됨: 양수

Promise 사용법

---

function isPositiveP(number){
  	// executor는 비동기 작업을 실질적으로 수행하는 실행자 함수
	const executor = (resolve, reject) => { 
		setTimeout(() => {
			if(typeof number === "number"){
              	// 성공
				resolve(number >= 0 ? "양수" : "음수");  
			} else {
              	// 실패
				reject("주어진 값이 숫자형 값이 아닙니다."); 
			}
		}, 2000);
	}
    
	const asyncTask = new Promise(executor); 
	return asyncTask;
}

const res = isPositiveP(101);

res
	.then((res) => {
		console.log("작업 성공: ", res);
	})
	.catch((err) => {
		console.log("작업 실패: ", err);
	});

// 작업 성공: 양수

🎉 실행시키기
1. 비동기 작업을 실질적으로 수행하는 실행자 함수, executor.
2. 비동기 작업 자체인 Promise를 저장할 상수 asyncTask를 선언하여 new Promise()로 Promise 객체를 생성한다.
3. new Promise(executor)와 같이, Promise 객체의 생성자로 비동기 작업의 실질적인 실행자 함수인 executor를 넘겨준다.
4. executor가 실행된다.

✨ Promise 객체의 비동기 결과값 사용하기
1. res는 반환받은 Promise 객체를 이용해 비동기 처리에 대한 resolve나 reject 값을 사용할 수 있다.
2. Promise 객체의 메서드 then 과 catch
✔ resolve를 사용했을 때, 전달한 결과값을 then 콜백함수에서 받아올 수 있다.
✔ reject를 사용했을 때는 catch 메서드에서 받아올 수 있다.

콜백지옥 해결하기

---

function taskA(a, b) {
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			const res = a + b;
			resolve(res);
		}, 3000);
	});
}

function taskB(a) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			const res = a * 2;
			resolve(res);
		}, 1000);
	});
}

function taskC(a) {
	return new Prmoise((resolve, reject) => {
		setTimeout(() => {
			const res = a * -1;
			resolve(res);
		}, 2000);
	})
}

// then 체이닝
taskA(5,1)
	.then((a_res) => {
		console.log("A RESULT: ", a_res);
		return taskB(a_res);
	})
	.then((b_res) => {
		console.log("B RESULT: ", b_res);
		return taskC(c_res);
	})
	.then((c_res) => {
		console.log("C RESULT: ", c_res);
	});

// A RESULT: 6
// B RESULT: 12
// C RESULT: -12

💞 Promise를 반환하는 함수로 바꾼 이유

function taskA(a, b) {
	const executorA = (resolve, reject)=>{
		setTimeout(()=>{
			const res = a + b;
			resolve(res); // resolve사용할 것이므로 이전의 cb을 resolve로 바꿈
		}, 3000);
	};
	return new Promise(executorA);
}

위와 같은 방식의 함수를 아래와 같이 Promise를 바로 반환하는 함수로 바꾸어주었다.

function taskA(a, b) {
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			const res = a + b;
			resolve(res);
		}, 3000);
	});
}

왜냐하면 어떤 함수가 Promise 객체를 반환한다는 것은, 해당 함수가 비동기적으로 동작하는 것을 의미한다. 또한, 반환한 Promise 객체를 이용해서 비동기 처리의 결과값을 then과 catch로 이용할 수 있게 만들겠다는 것을 알 수 있기 때문이다.

🔗 then 체이닝의 과정
1. taskA(5, 1)은 Promise 객체를 전달 받는다.
2. Promise 객체의 then 메서드를 사용해 taskB를 호출하는 것을 전달한다.
3. B의 Promise를 받는다.

taskA(5, 1).then((a_res) => {
	console.log("A RESULT: ", a_res);
	return taskB(a_res);
})

4. C의 Promise를 받는다.

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

결론

---

Promise를 사용하여 >모양으로 코드가 안으로 계속 밀려들어가지 않고,
]모양처럼 일렬로 나열할 수 있다.

😭 Before

taskA(4, 5, (a_res) => {
	console.log("A TASK RESULT:", a_res);
	taskB(a_res, (b_res) => {
		console.log("B TASK RESULT:", b_res);
		taskC(b_res, (c_res) => {
			console.log("C TASK RESULT:", c_res);
		});
	});
});

😊 After

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

참고

---

한입 크기로 잘라 먹는 리액트를 학습하며 개인적으로 정리한 내용입니다.