ES6 Promise

크롱·2023년 8월 18일
0

JavaSrcipt

목록 보기
50/53

💗 Promise

프로미스는 성공/실패 판정 기계이다.
순차적으로 코드를 실행하기위해 콜백함수대신에 쓸 수 있는 패턴입니다.


var 프로미스 = new Promise(); 👉 프로미스라는 변수 오브젝트를 하나 생성

프로미스.then(function(){
	👉 프로미스가 성공일 경우 실행할 코드
}).catch(function(){

});

new Promise() : Promise라는 변수 오브젝트를 하나 생성
프로미스라는 변수에다가 then()을 붙여서 실행

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

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




var 프로미스 = new Promise(function(resolve, reject){
  var 더하기 = 1 + 1;
  resolve(); //성공!
});

프로미스.then(function(){
  console.log('연산이 성공했습니다') //성공했으니 then 안에 요함수를 실행.
}).catch(function(){

});


//연산이 성공했습니다

참고로 연산결과같은걸 then 안에서 활용하고 싶으면
위처럼 resolve(); 함수 파라미터안에 넣어주시면 됩니다.



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

프로미스.then(function(결과){
  console.log(결과) //101
}).catch(function(){
  console.log('실패했습니다')
});


예제

1초후에 성공하는 Promise
그리고 성공시 특정 코드를 실행하고 싶다면


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



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

setTimeout에 의해 1초후에 resolve() 성공함.
그래서 1초후 콘솔창에 '1초 대기 성공했습니다' 뜸.

🌟fetch는 promise를 반환한다🌟

그래서 fetch( ).then( ) 이런거 쓸수잇듬.

profile
👩‍💻안녕하세요🌞

0개의 댓글