[Javascript] Promise 이해하기

📝 Promise란?

콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체이다.

🎯 Promise 특징

• promise API는 비동기 API 중 하나이다.
• 태스크 큐가 아닌 잡 큐를 사용한다.
• 잡 큐는 태스크 큐보다 우선순위가 높다.
• 비동기 작업을 표현하는 자바스크립트 객체이다.
• 비동기 착업을 진행, 성공, 실패 상태를 표현한다.
• 비동기 처리의 순서를 표현할 수 있다.

---

promise 생성자

let promise = new Promise((resolve, reject) -> {
	if(Math.random() < 0.5) {
		return reject('실패')
	}
	resolve('성공')
}

• new Promise(callback 함수)
• callback함수는 (resolve, reject) 두 인자를 받는다.
• Promise가 성공했을 때 resolve가 호출된다.
• Promise가 실패했을 때 reject가 호출된다.

promise 메서드

promise.then(data => {
		console.log('성공 : ', data)
	}).catch(e => {
		console.log('실패 : ', e)
	}).finally(() => {
		console.log('promise종료')
	})

• then() 메서드에 성공했을 때 실행할 콜백함수를 인자로 넘긴다.
• catch() 메서드에 실패했을 때 실행할 콜백함수를 인자로 넘긴다.
• finally() 메서드는 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
• then(callback1, callback2)로 callback1의 자리에 성공, callback2의 자리에 실패 메서드를 인자로 넘길 수 있다.

promise 메서드 체인

promise.then(data => {
		return fetchUser(Data)
	}).then(user => {
		console.log('User : ', user)
	}).catch(e=> {
		console.log('실패 : ', e)
	})

• then/catch 메서드가 또 다른 promise를 리턴하여 비동기 코드에 순서를 부여한다.
• 이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝이라고 한다.
• 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.

Promise.resolve / Promise.reject

Promise.resolve(10).then(console.log)
Promise.reject('error').catch(console.log)

• Promise.resolve 함수는 성공한 Promise를 바로 반환한다.
• 인위적으로 Promise메서드 체인을 만들 수 있다.
• 비동기 코드로 진행해야 하는 상황 등에 유용하게 사용할수 있다.

Promise.all

Promise.all([
	promise1,
	promise2,
	promise3,
]).then(values => {
	console.log('모두 성공:', values)
}).catch(e => {
	console.log('하나라도 실패:', e)
})

• Promise.all은 Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
• 하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환한다.