Promise

2022. 9. 4. 15:41Javascript

Promise는  코드/함수 디자인 패턴일 뿐이다. 자바스크립트의 새로운 기능 X

Promise가 좋은 이유 

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

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

 

성공하면 then(), 실패하면 catch()를 실행

<button id="successbtn">성공</button>
<button id="failbtn">실패</button>

<script>
    var 프로미스 = new Promise ((성공, 실패) => {
        document.getElementById('successbtn')
        .addEventListener('click', function(){
        성공();
      });
      document.getElementById('failbtn')
      .addEventListener('click', function(){
        실패();
      });
    
});

프로미스.then(()=>{
    console.log('성공했다.');
}).catch(()=>{
    console.log('실패했다.');
})
</script>

 

 

Promise의 몇가지 특징

 

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

프로미스 오브젝트들은 3개 상태가 있다

성공/실패 판정 전에는 <pending

성공 후엔  <resolved>

실패 후엔 <rejected> 이다.

 

성공을 실패나 대기상태로 다시 되돌릴 순 없다. 

 

 

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

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

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

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

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

 

( 원래 자바스크립트는 평상시엔 동기적으로 실행이 되고 비동기 실행을 지원하는 특수한 함수들 덕분에 가끔 비동기적 실행이 될 뿐이다.) 

'Javascript' 카테고리의 다른 글

prototype 연습문제  (0) 2022.09.06
Async/Await  (0) 2022.09.04
콜백함수  (0) 2022.08.23
웹브라우저의 동작원리 Stack, Queue  (0) 2022.08.22
Prototype(2)  (0) 2022.08.20