JS Promise(프로미스)란?

<Promise란>

비동기 처리에 사용되는 객체이다. 비동기 처리에는 콜백 함수, promise, await sync가 있다.

 

✨ 비동기 처리란: 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식

 

<프로미스를 사용하는 이유>

콜백 함수를 사용할때 중첩으로 여러개를 사용할 경우 코드의 가독성이 현저하게 떨어지게 된다. 그때 콜백을 사용하지 않고 프로미스를 사용하게 되면 코드의 갯수도 줄고 가독성이 향상된다.

 

<Promise의 장점>

1.  비동기 처리 시점을 명확하게 표현할 수 있다.
2. 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다.
3. 비동기 작업 상태를 쉽게 확인할 수 있다.
4. 코드의 유지보수성이 증가한다.

<Promise 사용법>

const promise = () => new Promise((resolve, reject) => {
    let a = 1 + 1;
    
    if(a == 2) {
    	resolve('success');	//성공시
    } else {
    	reject('failed');	//실패시
    }
});

promise().then((message) => {
	console.log('promise ' + message);
}).catch((meaage) => {
	console.log('promise ' + message);
});


//실행 결과
promise success

 

프로미스는 resolve와 reject 함수를 인자로 전달 받고 인자로 전달 받은 콜백 함수를 내부에서 비동기 처리한다.

프로미스는 비동기 처리가 성공(fulfilled) 또는 실패(reject) 등의 상태 정보를 갖게 되고, 성공일 때 resolve 함수를 실패할 경우 reject 함수를 호출하게 된다.

 

<후속 처리 메소드>

(then, catch)를 후속 처리 메소드라고 한다.

 

then

1. then 메소드는 두개의 콜백 함수를 인자로 전달 받는다.
2. 첫번째 콜백 함수는 성공시에 실행
3. 두번째 콜백 함수는 실패시에 실행
4. then 메소드는 기본적으로 프로미스를 반환한다.

catch

1. catch 메소드는 비동기 처리 혹은 then  메소드 실행 중 발생한 에러(예외)가 발생하면 호출된다.
2. catch 메소드는 프로미스를 반환한다.

<프로미스 정적 메소드>

1. Promise.resolve

resolve 메소드는 인자값을 래핑하여 프로미스를 반환한다.

const promise = Promise.resolve('success');
promise.then(message => console.log('promise ' + message));

//실행 결과
promise success

 

2. Promise.reject

reject 메소드 역시 인자 값을 래핑하여 프로미스를 반환한다.

const promise = Promise.reject('failed');
promise.catch(error => console.log('promise ' + error));

//실행 결과
promise failed

 

3. Promise.all

all 메소드는 프로미스가 담겨 있는 배열과 같은 lterable 객체를 인자로 받는다.

인자로 전달 받은 모든 프로미스를 병렬로 처리하고 그 결과 값을 배열에 담아 resolve로 반환한다.

const promise1 = () => new Promise(resolve => setTimeout(() => resolve(1), 1000));
const promise2 = () => new Promise(resolve => setTimeout(() => resolve(2), 2000));
const promise3 = () => new Promise(resolve => setTimeout(() => resolve(3), 3000));

promise1().then(result => {
    console.log(result);
    return promise2()
}).then(result => {
    console.log(result);
    return promise3()
}).then(result => {
    console.log(result);
});

//실행 결과
1	// 프로그램을 실행하고 1초뒤에 수행
2	// 프로그램을 실행하고 3초뒤에 수행
3	// 프로그램을 실행하고 6초뒤에 수행

 

4. Promise.race

race 메소드는 Promise.all 메소드와 동일하게 프로미스가 담겨 있는 literable 객체를 인자로 받지만, Promise.all과 달리 병렬로 처리하지 않고 가장 먼저 끝나는 프로미스 하나의 결과 값만을 resolve로 반환한다.

Promise.race([
    new Promise(resolve => setTimeout(() => resolve(1), 1000)),
    new Promise(resolve => setTimeout(() => resolve(2), 2000)),
    new Promise(resolve => setTimeout(() => resolve(3), 3000))
]).then(console.log) 
.catch(console.log);

//실행 결과
1

 

5. Promise.allSettled

allSettled 메소드 역시 Promise.all 메소드와 동일하게 프로미스가 담겨 있는 literable 객체를 인자로 받고 병렬로 처리한다.

다만 Promise.all의 경우 프로미스를 수행하던 도중 하나라도 에러(rejected)가 발생하면 rejected 상태가 되고 수행을 종료하게 되지만, allSettled 메소드의 경우 rejected 상태가 되어도 수행을 종료하지 않고, 프로미스가 수행된 상태와 결과 값을 배열에 담아 resovle로 반환한다.

Promise.allSettled([
    new Promise(resolve => setTimeout(() => resolve(1), 1000)),
    new Promise((resolve, reject) => setTimeout(() => reject(2), 2000))
]).then(console.log);

//실행 결과
[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: 2 }
]

 

Promise.all 메소드와 또 다른 차이점은 각각의 프로미스 처리 결과를 객체로 나타내고 status 프로퍼티를 가지게 된다. fulllfiled(성공) 상태인 경우 value 프로퍼티를 가지게 되고,  reject 상태인 경우 reason 프로퍼티를 가지게 된다.

---

이 글은 아래 사이트를 모방하여 작성하였습니다.

 

[JavaScript] 프로미스(Promise)란