Promise.all, Promise.race

gyomniยท2022๋…„ 1์›” 8์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
8/14
post-thumbnail

Promise.all

์—ฌ๋Ÿฌ๊ฐœ์˜ Promise ์ฒ˜๋ฆฌํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๊ฐ€๋Šฅ!

๐Ÿ”Ž ํ•˜๋‚˜์”ฉ Promise ์ฒ˜๋ฆฌ

> ์ฝ”๋“œ

function run(ms){
	return new Promise(resolve =>setTimeout(resolve, ms));
}

const getDog =async ()=>{
	await run(1000);
  	return '๐Ÿถ';
}

const getTiger =async ()=>{
	await run(500);
  	return '๐Ÿฏ';
}

const getRabbit =async ()=>{
	await run(3000);
  	return '๐Ÿฐ';
}

async function process(){
    const dog = await getDog();
    console.log(dog);
    const tiger = await getTiger();
    console.log(tiger);
    const rabbit = await getRabbit();
    console.log(rabbit);
}
	
process()

> ๊ฒฐ๊ณผ

๐Ÿถ
๐Ÿฏ
๐Ÿฐ

๐Ÿ“
๐Ÿถ๋ -> ๐Ÿฏ์‹œ์ž‘ ->๐Ÿฏ๋-> ๐Ÿฐ์‹œ์ž‘๋˜๋Š” ํ˜•์‹์œผ๋กœ ์ง„ํ–‰.
์ฆ‰ ํ•œ๊บผ๋ฒˆ์— ์ง„ํ–‰๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํ•˜๋‚˜์”ฉ ์ฒ˜๋ฆฌ๋ฅผ ํ•จ.
๋งŒ์•ฝ ์—ฌ๋Ÿฌ๊ฐœ์˜ Promise๋ฅผ ๋™์‹œ์— ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ?? => Promise.all ์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ž!


๐Ÿ”Ž ์—ฌ๋Ÿฌ๊ฐœ์˜ Promise ๋™์‹œ ์ฒ˜๋ฆฌ

> ์ฝ”๋“œ

function run(ms){
	return new Promise(resolve =>setTimeout(resolve, ms));
}

const getDog =async ()=>{
	await run(1000);
  	return '๐Ÿถ';
}

const getTiger =async ()=>{
	await run(500);
  	return '๐Ÿฏ';
}

const getRabbit =async ()=>{
	await run(3000);
  	return '๐Ÿฐ';
}

async function process(){
	const results = await Promise.all([getDog(),getTiger(),getRabbit()]);  
  	console.log(results);
}
	
process()

> ๊ฒฐ๊ณผ

["๐Ÿถ", "๐Ÿฏ", "๐Ÿฐ"]
// ์‹ค์ œ ๊ฑธ๋ฆฐ ์‹œ๊ฐ„ : 3์ดˆ

๐Ÿ“ ๋ฐฐ์—ด ์•ˆ์— Promise(= getDog(), getTiger(), getRabbit() )๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ , ๊ทธ ๋ฐฐ์—ด์„ Promise.all๋กœ ๊ฐ์‹ธ์ค€ ๋’ค ๊ทธ ์•ž์— await๋ฅผ ๋„ฃ์–ด์ค€๋‹ค!
๊ทธ๋Ÿฌ๋ฉด ๋ชจ๋“  Promise๋“ค ๋‹ค ์‹œ์ž‘ํ•˜๊ณ  ๋‚˜์„œ ๋ชจ๋‘ ๋๋‚˜๋ฉด, ๋ฐ˜ํ™˜๊ฐ’์—๋Š”(= results) ๊ฐ๊ฐ ๋๋‚œ ๊ฒฐ๊ณผ๊ฐ’์ด ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๋ฐฐ์—ด์ด ๋ฐ˜ํ™˜๋œ๋‹ค!


๐Ÿ”Ž Promise.all์— ๋“ฑ๋กํ•œ ๊ฐ Promise๋“ค์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ๊ฐ๊ฐ ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋กœ ๊บผ๋‚ด์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด?

โœจ๋ฐฉ๋ฒ• 1 (๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•)

> ์ฝ”๋“œ

function run(ms){
	return new Promise(resolve =>setTimeout(resolve, ms));
}

const getDog =async ()=>{
	await run(1000);
  	return '๐Ÿถ';
}

const getTiger =async ()=>{
	await run(500);
  	return '๐Ÿฏ';
}

const getRabbit =async ()=>{
	await run(3000);
  	return '๐Ÿฐ';
}

async function process(){
	const results = await Promise.all([getDog(),getTiger(),getRabbit()]);  
  	const dog = results[0];
  	const tiger = results[1];
  	const rabbit = results[2];
  
   	console.log(dog);
  	console.log(tiger);
  	console.log(rabbit);
}
	
process()

> ๊ฒฐ๊ณผ

๐Ÿถ
๐Ÿฏ
๐Ÿฐ
// ๋”ฐ๋กœ๋”ฐ๋กœ ์ถ”์ถœ

๐Ÿ“
dog --> getDog()
tiger --> getTiger()
rabbit --> getRabbit()
์ด๋ ‡๊ฒŒ ์ˆœ์„œ๋Œ€๋กœ ๊ฐ€๊ฒŒ๋จ~!

์ˆœ์„œ๋Œ€๋กœ ํ•  ์ˆ˜ ๋„ ์žˆ์ง€๋งŒ โ€ผ ๋ฐฐ์—ด ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น(๊ตฌ์กฐ ๋ถ„ํ•ด ๋ฌธ๋ฒ•)์„ ์ด์šฉํ•˜๋ฉด ํ›จ์”ฌ ๋” ๊น”๋”ํ•˜๊ฒŒ ๊ฐ€๋Šฅ!

โœจ๋ฐฉ๋ฒ• 2 (๋น„๊ตฌ์กฐํ™” ํ• ๋‹น)

> ์ฝ”๋“œ

function run(ms){
	return new Promise(resolve =>setTimeout(resolve, ms));
}

const getDog =async ()=>{
	await run(1000);
  	return '๐Ÿถ';
}

const getTiger =async ()=>{
	await run(500);
  	return '๐Ÿฏ';
}

const getRabbit =async ()=>{
	await run(3000);
  	return '๐Ÿฐ';
}

async function process(){
	const [dog, tiger, rabbit] = await Promise.all([getDog(),getTiger(),getRabbit()]);  
  	console.log(dog);
  	console.log(tiger);
  	console.log(rabbit);
}
	
process()

> ๊ฒฐ๊ณผ

๐Ÿถ
๐Ÿฏ
๐Ÿฐ
// ๋”ฐ๋กœ๋”ฐ๋กœ ์ถ”์ถœ

Promise.race

=> Promise.all๊ณผ ๋ชจ์Šต์€ ๋น„์Šท!
๋ฐฐ์—ด์„ ๋“ฑ๋กํ•˜๋Š” ๊ฒƒ์ด๊ณ , all๋Œ€์‹  race๋ฅผ ์“ฐ๋ฉด ๋œ๋‹ค. ๋“ฑ๋กํ•œ Promise ์ค‘์—์„œ ๊ฐ€์žฅ ๋นจ๋ฆฌ ๋๋‚œ ํ•˜๋‚˜๋งŒ ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋จ!

> ์ฝ”๋“œ

function run(ms){
	return new Promise(resolve =>setTimeout(resolve, ms));
}

const getDog =async ()=>{
	await run(1000);
  	return '๐Ÿถ';
}

const getTiger =async ()=>{
	await run(500);
  	return '๐Ÿฏ';
}

const getRabbit =async ()=>{
	await run(3000);
  	return '๐Ÿฐ';
}

async function process(){
	const first = await Promise.race([getDog(),getTiger(),getRabbit()]);  
  	console.log(first);

}
	
process()

> ๊ฒฐ๊ณผ

๐Ÿฏ

๐Ÿ“ getTiger => 500ms๋กœ ๊ฐ€์žฅ๋นจ๋ผ์„œ ๐Ÿฏ ์ถœ๋ ฅ๋จ!
Promise.race๋Š” ๋“ฑ๋กํ•œ Promise์ค‘์—์„œ ( getDog(), getTiger(), getRabbit() ) ๊ฐ€์žฅ ๋นจ๋ฆฌ ๋๋‚œ ๊ฒƒ์ด ๊ฒฐ๊ณผ๋ฌผ์ด ๋จ!


๐Ÿ”Ž ์•Œ์•„๋‘๊ธฐ!!!

๐Ÿ”Š Promise.all์—์„œ๋Š” ํ•˜๋‚˜๋ผ๋„ error๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ „์ฒด Promise๊ฐ€ error๊ฐ€ ๋‚œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ!!!
์ฆ‰ ํ•˜๋‚˜๋ผ๋„ error๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ, try-catch๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ error์„ ์žก์„ ์ˆ˜ ์žˆ์Œ!(๋‹ค์Œ์œผ๋กœ ๋ชป๋„˜์–ด๊ฐ)

๐Ÿ”Š Promise.race์—์„œ๋Š” ๊ฐ€์žฅ ๋นจ๋ฆฌ ๋๋‚œ ๊ฒƒ์ด error์ผ ๋•Œ์—๋งŒ error๋กœ ๊ฐ„์ฃผ!!
๊ฐ€์žฅ ๋นจ๋ฆฌ๋๋‚œ ๊ฒƒ์ด ํ•˜ํ•„ error์ผ ๋•Œ์—๋งŒ try-catch๋ฌธ์œผ๋กœ error์žก์„ ์ˆ˜ ์žˆ๋‹น~~!

profile
Front-end developer ๐Ÿ‘ฉโ€๐Ÿ’ปโœ

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