Today's/DevelopStory

[JavaScript] promise

Axis 2021. 7. 4. 22:38

 

promise 란?

비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.

코드의 형태 :

const promise = new Promise((resolve, reject) => {
	if(...){
		...
		resolve("성공!");
	}else{
		...
		reject("실패!");
	}
});

promise는 생성자 함수 Promise(new 키워드)를 통해 생성한다.
비동기 처리가 성공하면 resolve, 실패하면 reject를 호출한다.
비동기 작업을 수행할 콜백 함수를 인자로 전달받아 사용한다.

사용 예시 :

let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료!"), 1000);
    // 1,000 밀리세컨드 즉 1초가 지난 후 비동기 처리가 완료됨
    // 성공할 경우 resolve 인자에 "안녕!" 이라는 문구를 할당하여 반환 함
});

// resolve
promise.then(result => {console.log(result);}, error => {console.log(error);
//primise.them(성공 시 result라는 인자, 실패 시 error라는 인자 반환)
});

 

▲ 콘솔 창에 찍힌 결과

1. Promise의 상태값 :

pending: 비동기 처리 수행이 아직 완료되지 않음 (resolve, reject가 아직 호출되지 않음)
fulfilled: 수행이 성공하여 resolve가 호출된 상태
rejected: 수행이 실패하여 reject가 호출된 상태
settled: 비동기 처리 수행이 완료된 상태 (resolve든 reject든 호출이 된 상태)

2. 후속 처리 메서드 :

promise로 구현된 비동기 함수를 호출하는 측에서는 해당 promise 객체의
후속 처리 메서드를 통해서 비동기 처리 결과를 받아야 한다.
.then(성공시 인자, 실패시 인자) // 첫번째 인자만 작성해도 된다.
.catch(실패시 인자)

3. promise chaining(프라미스 체이닝) :

후속 처리 메서드를 체이닝해서 여러 개의 프라미스를 연결할 수 있다.
(콜백 헬을 해결하는 방법)

 사용 예시 :

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
	console.log(result);
	return "promise 3";
}).then(...);