Promise
형태
var 프로미스 = new Promise();
프로미스.then(function(){
}).catch(function(){
});new Promise() 로 인스턴스를 생성하면 Promise가 만들어진다.
만들어진 변수 프로미스 에 then() 을 붙여서 실행가능하다.
프로미스 안의 코드가 실행이 완료되었을 때 then() 함수 내의 코드를 실행해 준다.
코드 실행이 실패했을 경우엔 catch() 함수 내의 코드가 실행된다.
이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 Promise이다.
장점
- 콜백함수와 다르게 순차적으로 실행할 때 코드가 옆으로 길어지지 않는다.
- 콜백함수는 불가능한 ‘실패 시 특정 코드를 실행’ 하는게 가능
Promise란?
성공하면 then(), 실패하면 catch() 실행
이라는 코드를 짤 수 있게 도와주는게 Promise이다.
한마디로 성공&실패 판정기계이다.
var 프로미스 = new Promise(function(성공, 실패){
성공();
});
프로미스.then(function(){
}).catch(function(){
});Promise() 안에 콜백함수를 적어주면 그 안에서 성공/실패 파정을 내릴수 있다.
성공()이라고 첫번째 파라미터를 함수형태로 작성하면 성공판정이 된다.
반대로 실패()라고 둘째 파라미터를 함수 형태로 작성하면 실패판정이 된다.
위의 코드는 무조건 성공() 을 실행하니 then() 안의 코드가 실행 된다.
사용 예
var 프로미스 = new Promise(function(성공, 실패){
var 어려운연산 = 1 + 1;
성공(어려운연산);
});
프로미스.then(function(결과){
console.log('연산이 성공했습니다' + 결과)
}).catch(function(){
console.log('실패했습니다')
});프로미스 내의 1+1 이라는 연산이 완료되면 성공() 판정을 내리며
then() 이 실행 되고 어려운 연산이라는 연산 결과를 then() 에서 활용하고 싶으면 성공(어려운연산) 의 파라미터로 활용하면
then() 함수 안에서 파라미터의 형태로 사용이 가능하다.
특징
(1) new Promise() 로 생성된 오브젝트를 콘솔창에 출력하면 현재 상태를 알 수 있다.
성공/실패 판정 전에는 ,
성공 후엔 ,
실패 시 .
(2) Promise는 동기를 비동기로 만들어주는 코드가 아니다.
연습문제
Q1. 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다.
HTML 안에 있는 이미지 로딩이 끝나면 무언가 코드를 실행하고 싶습니다.
<img id="test" src="https://codingapple1.github.io/kona.jpg">이 이미지가 로드가 되면 콘솔창에 성공, 로드가 실패하면 콘솔창에 실패를 출력하고 싶은데
Promise 문법의 then, catch 함수를 사용해 만들고 싶습니다. 어떻게 코드를 짜면 될까요?
Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다.
https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다.
여기로 GET 요청을 해서 성공하면
Promise의 then 함수를 이용해서 Ajax로 받아온 인삿말을 콘솔창에 출력해주고 싶습니다.
어떻게 하면 될까요?
(jQuery done함수 자체에 Promise 기능이 있기 때문에 코드가 약간 중복도 많고 쓸데없을 수 있지만 연습삼아 해봅시다.)
// 이것은 jQuery Ajax 편리하니까 jQuery CDN 파일
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>