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를 사용할 수 있다.