Javascript - Promise

Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

자바스크립트는 일반적으로 동기 처리를 하는 싱글 스레드 언어인데, 위에서 아래로 글을 읽듯이 하나 둘 처리하는 방식이다. 비동기 처리는 동시에 멀티로 처리하는 방식을 말한다.

 

Promise는 왜 필요할까요?

서버와의 데이터를 요청하는데, 이 때, 데이터를 받아오기 전에 데이터를 처리하면 빈화면이 나오는데, 이를 보안하기 위한 방법중 하나가 프로미스입니다

 

Promise의 상태 3가지

 

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending 상태는 new Promise() 메서드를 호출하면 대기(Pending) 상태가 됩니다.

Fulfill 상태는 return new Promise(resolve, reject){ resolve()} 를 사용하면 이행 상태가됩니다.

Rejected 상태는 return new Promise(resolve, reject){ reject()} 를 사용하면 실패 상태가 됩니다.

 

Fullfill은 then, rejected catch로 받을 수 있습니다.

 

 

예문 1

const one = Promise.resolve('1');
const two = Promise.resolve('2');
const three  = Promise.reject('3');
const four = new Promise((delay)=>{
    setTimeout(()=>{
        resolve('4');
    }, delay)
})

one.then((o)=>{
    console.log(o)
    return two
}).then((tw)=>{
    console.log(tw)
    return three
}).reject((th)=>{
    console.log(th)
    return four(3000)
}).then((four)=>{
    console.log(four);

})
.finally(()=>console.log('end'))

예문 2

const starbucks = function(coffeeName){
    return new Promise((resolve, reject)=>{
        if(coffeeName==='아메리카노'){
            resolve('아메리카노 한잔입니다.')
        }else{
            reject('아메리카노는 없습니다')
        }
    })
}

starbucks('아메리카노')
    .then((res)=>console.log(res))
    .catch((rej)=>console.log(rej))
    .finally(()=>console.log('감사합니다'))

여기서 finally는 then과 catch와 상관없이 도달하는 것이다. 그리고, catch나 then 한개만 쓰고 싶다면 if문을 없애고 return new Promise((resolve, reject)=>{resolve('result')})와 같이 하나만 기입하면 된다.

 

여기서 잠깐, 예문 2에서의 starbucks .then .catch .finally 말고 다른방식으로 쓰는 방식이 있다. 바로 async이다.

 

예문3

//async 예시1
async function foo() {return 1}
function foo(){return Promise.resolve(1)}
//async 예시2
async function foo(){await 1}
function foo(){return Promise.resolve(1).then(()=>undefined)}

//starbucks 예문2에 대한 async 표시방식
async function americano(drink){
    try{
        const result = await starbucks(drink);
        return result;
    }catch (error){
        console.log(error); 
    }finally{
        console.log('감사합니다')
    }
}
americano('아메리');

Promise는  async 예시1과 예시2에 있듯이 async function으로 간단하게 표현이 가능하며, await으로 fullfil이나 rejected가 되기 이전에, 잠시 function을 정지시키며, fulfill이 되야하는경우 await을 return한다. 

 

then catch는 return을 scope 해야하는 단점이있고, async는 try catch로 내부를 자유롭게 할당할 수 있는 장점이 있지만, async를 사용했던걸 재활용할때마다 await를 붙여야하는 단점이있다