[JavaScript] Promise

ํ˜œ๋ฆฐยท2022๋…„ 6์›” 27์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
12/21
post-thumbnail

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);
})
  1. 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);
	});



์ฐธ๊ณ 


ํ•œ์ž… ํฌ๊ธฐ๋กœ ์ž˜๋ผ ๋จน๋Š” ๋ฆฌ์•กํŠธ๋ฅผ ํ•™์Šตํ•˜๋ฉฐ ๊ฐœ์ธ์ ์œผ๋กœ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.

profile
FE Developer

0๊ฐœ์˜ ๋Œ“๊ธ€