Promise
2022. 9. 4. 15:41ㆍJavascript
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 |