비동기 처리 - Promise

yunji_kim·2023년 3월 27일
0

JavaScript

목록 보기
5/9

Promise

  • promise란 비동기 작업을 표현하는 자바스크립트 객체로, 비동기 작업의 대기(pending), 이행(fulfilled), 성공(fulfilled/resolved), 실패(rejected) 상태를 표현한다.
  • 콜백 함수와 역할은 같지만 가독성이 더 좋다는 특징이 있다.
  • promise를 사용해 비동기 처리의 순서를 표현할 수 있다.
  • promise는 비동기 API 중 하나이며, task queue가 아닌 job queue(혹은 microtask queue)를 사용한다.
  • job queue는 task queue보다 우선순위가 높다. (setTimeout은 task queue이므로 setTimeout보다 promise가 먼저 실행된다.)
💡 Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 ‘약속’(프로미스)을 반환한다.

Promise 생성자 new Promise(callback)

let promise = new Promise((resolve, reject)=> {
	if(Math.random() < 0.5) {
		return reject("실패 : 0.5보다 작습니다")
	}
	resolve("성공 : 0.5보다 큽니다")
})
  • callback함수는 두 개의 인자를 받으며, promise가 성공했을 때 앞의 인자(resolve), 실패 했을 때 뒤의 인자(reject)를 호출한다.

Promise 메서드 promise

promise
	.then(data => {
		console.log("성공:", data)
	})
	.catch(e => {
		console.log("실패:", e)
	})
	.finally(() => {
		console.log("promise종료")
	})
  • 성공했을 때 실행할 콜백 함수를 then( )메서드에 인자로 넘긴다.
  • 실패했을 때 실행할 콜백 함수를 catch( )메서드에 인자로 넘긴다.
  • finally( )메서드는 성공/실패 여부와 상관없이 모두 실행할 콜백함수를 인자로 넘긴다.
  • then(callback1, callback2)로 성공, 실패 콜백함수를 함께 인자로 넘길 수 있다.
  • 값을 넘길 땐 return을 해줘야하며 화살표 함수로 작성 시 return 생략 가능하다.

Promise 메서드 체인

  • then/catch메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서를 부여한다.
  • 예시로, (A) promise의 then 콜백함수로 (B) promise가 들어가 있다면, (B) promise가 끝날 때까지 (A) promise는 기다리게 된다.

Promise의 정적 메서드

1. Promise.resolve Promise.reject

Promise
	.resolve(10)
	.then(console.log)

Promise
	.reject("Error")
	.catch(console.log)
  • 여기서 Promise는 생성자가 아닌 클래스명으로, 이 Promise클래스명에 .resolve, .reject 정적 메소드를 바로 사용할 수 있다.
  • Promise.resolve함수는 성공한 Promise를 바로 반환하며, Promise.reject함수는 실패한 Promise를 바로 반환한다.
  • 즉, 꼭 promise를 return하는 함수를 만들고 그 함수를 호출할 필요없이, 인위적으로 Promise 메서드 체인을 만들 수 있다.
  • 비동기 코드로 진행해야 하는 상황 등에 유용하게 사용할 수 있다.

2. Promise.all

Promise.all([
	promise1,
	promise2,
	promise3
])
	.then(values => {
		console.log("모두 성공:", values)
})
	.catch(e => {
		console.log("하나라도 실패:", e)
})
  • Promise.all은 Promise의 배열을 받아(꼭 Promise가 아니더라도 일반 데이터 삽입 가능) 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
  • 하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환한다.

callback 기반 함수를 Promise 함수로 변경하는 방법

// callback 기반 함수
db.getUsers((err, users) => {
	console.log(users);
});
// Promise 함수로 변환
function getUsersPromise(parmas) {
	return new Promise((resolve, reject) => {
		getUsers(params, (err, users) => { // callback 기반 함수
			if (err) {
					reject(err);
					return;
			}
			resolve(users);
		})
	})
}

<변환 작업>

  1. Promis를 반환하는 함수 생성
  2. Promise는 resolve, reject를 인자로 갖도록 함
  3. Promise 함수 안에서 callback 기반 비동기 함수를 실행한 후 결과는 resolve로, 오류는 reject로 전달
profile
| FE Developer | 기록의 힘 |

0개의 댓글