자바스크립트 JavaScript : Promise

프로미스 (Promise) 란?

ES6에서 도입된 패턴으로, 비동기 작업을 더 효율적으로 다룰 수 있게 해줍니다.
프로미스는 비동기 작업의 성공, 실패, 진행 상태를 다루는 객체입니다.
.then()과 .catch() 메서드를 사용하여 비동기 작업을 연결하고 오류 처리를 할 수 있습니다

 

Promise 생김새 맛보기 

var 프로미스 = new Promise();

프로미스.then(function(){

}).catch(function(){

});

이것이 끝입니다. 

new Promise() 문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다. 

그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 

 

프로미스 안의 코드가 실행이 완료가 되었을 때 then() 함수 내의 코드를 실행시켜줍니다. 

코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜줍니다. 

 

이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise입니다. 

 

Promise가 콜백함수보다 좋다고 하는 이유는 두개가 있습니다. 

1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할 때 코드가 옆으로 길어지지 않습니다. then 함수를 붙여서 순차적으로 실행하니까요.

2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~' 라고 코드를 짤 수 있습니다. (catch)

 

Promise의 사용법

성공하면 then(), 실패하면 catch()를 실행해주세요~ 라는 코드를 짤 수 있게 도와주는게 바로 Promise입니다. 

 

Promise 기계 안에는 아무거나 다 집어넣을 수 있습니다.

• 어려운 연산이 끝나면 성공판정 내려주세요
• 페이지 내의 <button>을 누르면 성공으로 판정해주세요 
• Ajax 요청으로 서버의 데이터를 가져오면 성공판정, 에러나면 실패판정해주세요

Promise 안에서 성공/실패를 판정하는 방법은 쉽습니다.

var 프로미스 = new Promise(function(resolve, reject){
  resolve();
});

프로미스.then(function(){

}).catch(function(){

});

Promise()안에 콜백함수를 하나 추가해주시면 그 안에서 성공/실패 판정을 내릴 수 있습니다. 

성공()이라고 첫째 파라미터를 함수형태로 작성하면 성공판정이 됩니다. 

실패()라고 둘째 파라미터를 함수형태로 작성하면 실패판정이 됩니다. 

위의 코드는 무조건 성공()을 실행하게 되어있으니 무조건 성공을 판정내리며 그 후엔 이제 then()안의 코드가 실행이 되겠죠? 

 

예시1. 힘든 수학연산 성공 후에 특정 코드를 실행하려면?

콜백함수로 디자인해놓아도 될 것 같죠? 그럼 그렇게 하시면 됩니다. 

근데 저는 콜백보다는 .then()을 쓰고싶어서 Promise를 한번 활용해보겠습니다. 

var 프로미스 = new Promise(function(resolve, reject){
  var 어려운연산 = 1 + 1;
  resolve();
});

프로미스.then(function(){
  console.log('연산이 성공했습니다')
}).catch(function(){

});

Promise()안에 어려운 수학 연산을 해주는 기능을 추가했습니다.

그리고 그 연산이 완료되면 성공() 코드를 실행하도록 코드를 추가했습니다.

 

기계를 잘 만들어놨으니 then 함수 안에는 프로미스가 성공판정을 내리면 실행할 코드를 담을 수 있습니다. 

그럼 디자인 끝입니다. 

 

1. 이제 프로미스 내의 1+1 이라는 어려운 수학연산이 완료되면 성공() 판정을 내리며, 

2. 성공시 then() 내의 코드를 실행해줍니다. 

 

Promise 내에선 특정상황시 실패판정을 내릴 수도 있습니다. 

이렇게 하시면 됩니다. 

var 프로미스 = new Promise(function(resolve, reject){
  var 어려운연산 = 1 + 1;
  reject();
});

프로미스.then(function(){
  console.log('연산이 성공했습니다')
}).catch(function(){
  console.log('실패했습니다')
});

 

참고로 연산결과같은걸 then 안에서 활용하고 싶으면 

resolve(); 함수 파라미터에 넣어주시면 됩니다.

var 프로미스 = new Promise(function(resovle, reject){
  var 어려운연산 = 1 + 1;
  resovle(어려운연산);
});

프로미스.then(function(결과){
  console.log('연산이 성공했습니다' + 결과)
}).catch(function(){
  console.log('실패했습니다')
});

그럼 then 함수 안에서 파라미터의 형태로 그 결과를 사용하실 수 있습니다. 

끝입니다. 

 

예시2. 1초 대기 성공 후에 특정 코드를 실행하려면?

var 프로미스 = new Promise(function(resovle, reject){
  setTimeout(function(){
    resovle();
  }, 1000);
});

프로미스.then(function(){
  console.log('1초 대기 성공했습니다')
}).catch(function(){
  console.log('실패했습니다')
});

 

 

Promise chaining

Promise chaining은 여러 비동기 작업을 순차적으로 실행할 수 있는 기술입니다. 

Promise 객체의 .then() 메서드를 호출하여 프로미스가 해결될 때 실행할 함수를 지정할 수 있습니다. 이 함수는 새로운 프로미스를 반환할 수 있으며, 이를 사용하여 여러 프로미스를 연결할 수 있습니다

 

예를 들어, 다음과 같이 프로미스 체인을 구성할 수 있습니다

let 프로미스 = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000);
})

프로미스.then(function(result) {
  alert(result);
  return result * 2;
}).then(function(result) {
  alert(result);
  return result * 2;
}).then(function(result) {
  alert(result);
});

위 코드에서는 다음과 같은 흐름이 있습니다:

초기 프로미스가 1초 후에 해결됩니다.

1. 첫 번째 .then 핸들러가 호출되고, 새로운 프로미스가 생성됩니다 (값이 2로 해결됨).
2. 다음 .then 핸들러가 이전 핸들러의 결과를 받아 처리하고 다음 핸들러로 전달합니다.
3. 이런 식으로 결과가 핸들러 체인을 따라 전달되며, alert 결과는 1 → 2 → 4입니다.

Promise의 몇가지 특징

1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보시면 현재 상태를 알 수 있습니다. 

• 성공/실패 판정 전에는 <pending> 이라고 나오며
• 성공 후엔  <resolved>
• 실패 후엔 <rejected> 이런 식으로 나옵니다.

이렇게 프로미스 오브젝트들은 3개 상태가 있습니다.

그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없습니다. 참고로 알아둡시다. 

 

 

2. Promise는 동기를 비동기로 만들어주는 코드가 아닙니다. 

Promise는 비동기적 실행과 전혀 상관이 없습니다.

그냥 코딩을 예쁘게 할 수 있는 일종의 디자인 패턴입니다.

예를 들면.. Promise 안에 10초 걸리는 어려운 연산을 시키면 10초동안 브라우저가 멈춥니다.

10초 걸리는 연산을 해결될 때 까지 대기실에 제껴두고 그런거 아닙니다.