Promise All

yeeunit22Β·2022λ…„ 8μ›” 16일
0

Promise

PromiseλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 비동기 μ²˜λ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 객체이닀.
즉, μ„œλ²„μ—μ„œ λ°›μ•„μ˜¨ 데이터λ₯Ό 화면에 ν‘œμ‹œν• λ•Œ 데이터λ₯Ό λ°›μ•„μ˜€κΈ°λ„ 전에 화면이 κ·Έλ €μ Έ 였λ₯˜κ°€ λ°œμƒν•˜κ±°λ‚˜ 빈 화면이 뜨게 λ˜λŠ”λ°
μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•œ 방법 쀑 ν•˜λ‚˜μ΄λ‹€.

ν”„λ‘œλ―ΈμŠ€μ—λŠ” μ„Έ 가지 μƒνƒœ(μ²˜λ¦¬κ³Όμ •)κ°€ μžˆλ‹€.

  • Pending(λŒ€κΈ°): 비동기 처리 둜직이 아직 μ™„λ£Œλ˜μ§€ μ•Šμ€ μƒνƒœ
  • Fulfilled(이행): 비동기 μ²˜λ¦¬κ°€ μ™„λ£Œλ˜μ–΄ ν”„λ‘œλ―ΈμŠ€κ°€ κ²°κ³Ό 값을 λ°˜ν™˜ν•΄ μ€€ μƒνƒœ
  • Rejected(μ‹€νŒ¨): 비동기 μ²˜λ¦¬κ°€ μ‹€νŒ¨ν•˜κ±°λ‚˜ 였λ₯˜κ°€ λ°œμƒν•œ μƒνƒœ

비동기 처리λ₯Ό 닀루고 μ‹Άλ‹€λ©΄

const promise = new Promise((resolve) => {
	setTimeout(() => {
		resolve()
			}, 1000)
	})
// Promise
promise.then(() => {
	console.log('λ‹€μŒ μž‘μ—…')
})
const onClickPromise = async () => {
		const result1 = await new Promise((resolve, reject) => {
			setTimeout((resolve("3초 ν›„ μ‹€ν–‰")) => {}, 3000)
		})
		const result2 = await new Promise((resolve, reject) => {
			setTimeout((resolve("2초 ν›„ μ‹€ν–‰")) => {}, 2000)			
		})
		const result3 = await new Promise((resolve, reject) => {
			setTimeout((resolve("1초 ν›„ μ‹€ν–‰")) => {}, 1000)
		})
	};

각각의 ν•¨μˆ˜μ— async-awaitλ₯Ό μ‚¬μš©ν•˜μ—¬ 각 μž‘μ—…μ΄ 순차적으둜 μ‹€ν–‰λ˜μ§€λ§Œ λŠλ¦¬λ‹€.

Promise.all()

Promise.all()을 μ‚¬μš©ν•˜λ©΄ λ™μ‹œμ— μ‹€ν–‰ν•  처리λ₯Ό ν•œλ²ˆμ— λͺ¨λ‘ 끝내고 λ‹€μŒ μž‘μ—…μ„ μ‹€ν–‰ν•˜λ„λ‘ λ§Œλ“€ 수 μžˆλ‹€. λ¨Όμ € μ²˜λ¦¬ν•΄μ•Όν•˜λŠ” μˆœμ„œκ°€ ν•„μš” μ—†λŠ” 경우 비동기 μž‘μ—…λ“€μ„ λ³‘λ ¬λ‘œ μ§„ν–‰ν•˜λŠ” 것이닀. λ”°λΌμ„œ 각 λͺ…령을 순차적으둜 λλ‚΄λŠ” promise에 λΉ„ν•΄ μ‹€ν–‰ 속도가 맀우 λΉ λ₯΄λ‹€ !

// Promise.all()
	const onClickPromiseAll = async () => {
		const result = await Promise.all([
			setTimeout((resolve("3초 ν›„ μ‹€ν–‰")) => {}, 3000)
			setTimeout((resolve("2초 ν›„ μ‹€ν–‰")) => {}, 2000)
			setTimeout((resolve("1초 ν›„ μ‹€ν–‰")) => {}, 1000)
		])
	};

Promise.all()을 μ‚¬μš©ν•˜μ—¬ ν•œλ²ˆμ— μ—¬λŸ¬ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  λ•Œμ—λŠ” map, for, forEachλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.

profile
🍎 The journey is the reward.

0개의 λŒ“κΈ€