Promise(=성공/실패 판정기계)

Promise()

프로미스 = 성공/실패 판정기계!
 
-3가지 상태-
성공실패 판정전 <pending>
성공 후엔 <resolved>
실패 후엔 <rejected>

var 프로미스 = new Promise();

프로미스.then(function(){

}).catch(function(){

}); // 콜백함수와 다르게 '실패시 특정 코드를 실행해주세요~' 가능함

 

 

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

var 프로미스 = new Promise(function(성공,실패){
 var 어려운연산 = 1+1;
 성공();
});

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

//참고로, 연산결과같은걸 then안에서 활용하고 싶으면, 성공함수 ()안에 넣어주시면 됩니다
var 프로미스 = new Promise(function(성공,실패){
 var 어려운연산 = 1+1;
 성공(어려운연산);
});

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

 
 
 
 

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

var 프로미스 = new Promise(function(성공,실패){
  setTimeout(function(){
    성공();
  },1000);
});

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

 
 
 
 
 
 

---

 


Q1. <img> 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다. 

<img id="test" src="https://codingapple1.github.io/kona.jpg"> 
//HTML 안에 있는 이미지 로딩이 끝나면 무언가 코드를 실행하고 싶습니다

//프로미스 기계 만들기(이벤트가 성공하면 성공호출 후, '성공했어요' 콘솔창에 출력)
  //                (이벤트가 실패하면 실패호출 후, '실패했어요' 콘솔창에출력)

  //<성공/실패 함수호출>
  var 이미지로딩 = new Promise(function(성공,실패){
    
  var img = document.querySelector('#test');

  img.addEventListener('load',function(){
    성공();
  });
  img.addEventListener('error',function(){
    실패();
  });
  });
 
  //<프로미스로 만든 이미지로딩에 then과 catch함수를 적어줌>
  이미지로딩.then(function(){
    console.log('성공했어요')
  }).catch(function(){
    console.log('실패했어요')
  })

 


 
 
Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다. 

//Ajax 요청을 하려면 $.get을 쓰시면 됩니다.
$.get('URL 경로').done(function(결과){
  console.log(결과)
});

var 프로미스 = new Promise(function(성공,실패){
    $.get('https://codingapple1.github.io/hello.txt').done(function(결과){
    성공(결과)
    });
  });

 프로미스.then(function(결과){
  console.log(결과);
 })

 



 
Q3. Promise chaining 

2번 문제에서 https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 한 뒤에
.then을 이용해 인삿말을 콘솔창에 출력해보았습니다. 
이번엔 그 직후 https://codingapple1.github.io/hello2.txt 라는 경로로 GET 요청을 또 하고
.then을 이용해 인삿말을 또 출력해보고 싶습니다. 

//여러번 연속해서 프로미스를 요청해줄것임 = Ajax요청 성공시 다른 곳으로 Ajax요청

//첫번째 프로미스:hello를 요청해서 성공판정을 해준다
  var 프로미스 = new Promise(function(성공,실패){
    $.get('https://codingapple1.github.io/hello.txt').done(function(결과){
    성공(결과)
    });
  });

프로미스.then(function(결과){ //첫번째 프로미스가 성공이 되었을때 콘솔을 출력해줌
  console.log(결과);
  //두번째 프로미스: hello2를 요청해서 성공판정을해준다      
  return new Promise(function(성공,실패){
    $.get('https://codingapple1.github.io/hello2.txt').done(function(결과){
    성공(결과)
    });//then()에서 new Promise()를 리턴하면, 뒤에 또 then()을 쓸 수 있구나 
  });;//프로미스를 퉤 뱉는다~ 그러면 새로운 프로미스가 만들어지고 거기에 .then을 붙일수있음.  
  
 }).then(function(결과){ //두번째 프로미스가 성공이 되었을때 콘솔을 출력해줌
  console.log(결과);
 })

 

 

Promise chaining

Promise chaining가 필요하는 경우는 비동기 작업을 순차적으로 진행해야 하는 경우입니다.
Promise chaining이 가능한 이유는 .then, .catch, .finally 의 메서드들은 Promise를 리턴하기 때문입니다. 따라서  .then을 통해 연결할 수 있고, 에러가 발생할 경우 .catch 로 처리하면 됩니다.