자바스크립트 문법정리 8 [ promise ]

Promise를 들어가기전에

 

여러개의 콜백함수를 통해 고차함수를 만들게되면

 

첫째함수(()=>{
    둘째함수(()=>{
        셋째함수(()=>{
            
        })
    })
})

이런식으로 어지러워지게되는데

코드가 더러워지는 콜백함수의 문제점을 해결하기 위해 나온게 바로 Promise 코드 디자인패턴

 

Promise가 어떻게 돌아가는지 봅시다

 

저런 위에 어지러운 코드가

var 프로미스 = new Promise()
프로미스
.then(function(){//프로미스가 성공일 경우 실행할 코드

})
.then(function(){

})//이렇게 하면 옆으로 길어지지않아서 좋음\

이렇게 간단하게바뀝니다

 

또 몇개의 메소드가있는데 

var 프로미스 = new Promise()
프로미스.catch(function(error){//실패할경우

})
var 프로미스 = new Promise()
프로미스.finally(function(error){//성공이든 실패든 실행되면실행

})

catch와 finally입니다 catch는 쓰이는곳이 많아요 ajax라던가 axios라던가

 

자그럼 Promise는 무엇인가?

 

프로미스는 성공/실패를 판정하는 기계라고생각하면됍니다.

 

 

var 프로미스 = new  Promise(function(resolve, reject){
    resolve();//성공판정내리는법
    reject(new Error)//실패판정내리는법
})

요놈을 좀더 활용해보면
//프로미스를 만들어준다음
var 프로미스 = new  Promise(function(resolve, reject){
   var 어려운연산 = 1+1;//1+1연산이 끝나면 성공판정 내려주세요
   resolve(어려운연산);//파라미터안에 뭘넣으면 성공함수까지 들어감
    reject();

})
//프로미스.then으로 실행함수를 만들어줍니다.
프로미스.then(function(결과){//성공했을때 실행되는 코드
    console.log('성공했어요')
    console.log(결과)
}).catch(function(){
    console.log('실패했어요')//실패했을때 실행되는 코드
    
})

1.새로운 프로미스 만들기

 

2.실행함수들 then으로 이어붙이기

 

프로미스를 쓰는이유는 아래 두가지!

1.콜백 대신 예쁜코드

2.성공/실패의 경우에 맞춰 각각 다른코드 실행가능

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

var 프로미스 = new  Promise(function(resolve, reject){
    //1초후에 성공하는 Promise
    setTimeout(function(){
        성공();
    }, 1000);
})

이런식으로 1초후에 실행되는 promise를 만들게 되는데

이때 세가지상태가 존재합니다

 

프로미스의 3가지 상태

1.성공하면 <resoved>
2.판정 대기중이면<pending>
3.실패하면 <reject>

 

프로미스에 대한 이해

 

그냥 코드를 이쁘게짤려고쓰는거에요 동기를 비동기적처리가가능하게 해주는 마법의 문법이아님