Promise에 대해 알아보자!

Promise란?

프로미스는 자바스크립트 비동기처리에 사용되는 객체입니다.

자바스크립트는 동기식 언어로 한번에 한작업만 실행을 하게 되는데 비동기처리를 하면

특정코드의 실행이 완료될때까지 기다리지 않고 다음코드를 먼저 수행하게된다.

 

Promise가 필요한 이유?

- callback 지옥에서 벗어날 수 있다.

function c(callback) {
  setTimeout(() => {
 	 callback();
  }, 1000)
};

c(() => {console.log('callback')}) //1초 뒤 console 출력

// 콜백지옥
c(() => {
  c(() => {
    c(() => {
    	console.log('callback') //3초 뒤 console 출력
    })
  })	
})

- 데이터를 받아온 후 데이터를 표시하기 위해서

 

Promise의 구조

Promise 객체에 콜백함수를 선언하고

콜백함수에 resolve, reject 인자를 선언할 수 있다.

Promise 호출 성공시 resolve함수 실행, 실패시 reject함수 실행

new Promise(function(resolve, reject) {
  resolve('성공');
  reject('실패')
})

 

Promise의 상태(states)

프로미스의 3가지 상태

• Pending(대기) - 비동기 처리 로직이 완료되지 않은 상태
• Fulfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과값을 반환해준 상태
• Rejected(실패) - 비동기 처리가 실패하거나 오류가 발생한 상태

출처 패스트캠퍼스

 

Pending (대기)

Promise호출 즉시 pending 상태로 변경된다.

 

Fulfilled (이행)

Promise호출 성공시 resolve()를 실행하고 Fulfilled상태가 된다.

Fulfilled상태가 된 후 then을 이용해서 받을 수 있다.

new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve('data')
  }, 1000)//비동기 처리 구문
})
  .then((data) => {console.log(data)});

 

Rejected

비동기처리 실패나 오류가 있는경우 reject()함수를 실행하면 Rejected상태가 된다. 

일반적으로 reject()함수에서 자바스크립트 error객체를 넘겨준다.

throw된 error객체를 catch구문에서 받을 수 있다.

new Promise(function(resolve, reject) {
  setTimeout(() => {
    reject(new Error('error'))
  }, 1000)
})
  .then(() => {}) //then은 실행되지 않는다. 
  .catch((err) => {console.log(err)})

 

 

Promise Chaining

프로미스는 여러개의 프로미스를 연결하여 사용할 수있다는 점 입니다.

Then 메소드가 호출되면 새로운 프로미스객체가 반환되서 then을 순차적으로 실행할 수 있다.

new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve('data')
  }, 1000)
})
  .then((data) => {console.log(data)})
  .then(() => {})
  .then(() => {})

Then chaining에서 return한 데이터를 다음then에서 받을 수 있다.

finally에서는 return한 데이터를 받을 수 없다.

new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve(10)
  }, 1000)
})
  .then((data) => {
    console.log(data); //10
    return data + 10;
  })
  .then((data) => {
    console.log(data) //20
    return data + 10;
  })
  .then((data) => {
    console.log(data) //30
    return data + 10;
  })

 

많이 사용하는 Promise 사용법

함수의 실행과 동시에 프로미스 객체를 만들면서 pending이 시작하도록 하기위해

return으로 Promise객체를 반환하고 동시에 then을 설정해 줍니다.

function p() {
  return new Promise((resolve), reject) => {
  })
}

p().then(() => {}) //함수실행과 동시에 then설정

 

Promise.finally

fulfiled되거나 rejected된 후 최종적으로 실행할 것이 있다면, finally를 실행해준다.

finally에서는 return된 데이터를 못가져온다.

new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve(10)
  }, 1000)
})
  .then((data) => {
    console.log(data); //10
    return data + 10;
  })
  .catch((err) => {
  	console.log(err)
  })
  .finally((data) => {
  	console.log(data); //finally에서는 return값을 받을 수 없다.
  })

 

Promise.all

배열로 promise객체를 넘겨서 모든 Promise객체가 다 실행된 후 fulfilled 된다.

* 주의할점 순차적으로 실행되어야하는 promise는 사용하지 말것!! 순서를 보장하지 않는다.

 

모든 프로미스 객체를 다 성공해야 then이 실행되고, 하나만 fail이여도 오류가 난다. 

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // expected output: Array [3, 42, "foo"]
});

 

Promise.race

배열로 넘긴 promise객체 중 가장먼저 반환 된 promise값을 리턴한다.

큰이미지를 로드하는데 하나라도 성공하면 그 이미지를 보여주는 로직을 작성할 때 사용한다. 

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "two"

 

 

참고한 자료

- 캡틴판교 자바스크립트 Promise쉽게 이해하기

- Promise mdn