본문 바로가기

Dev/JavaScript

Promise 문법 사용하기

728x90

Javascript는 파일 읽기, 쓰기, 등 많은 비동기 작업이 필요하다. 그 중 대표적으로 사용되는 것이 Promise이다.


function promiseStudy(param){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            if(param){
                resolve("성공")
            }else{
                reject("실패")
            }
        }, 3000)
    })
}
setTimeout( function(){
    promiseStudy(true).then(function(temp){
        console.log(temp)
    })

    promiseStudy(true).then(function(){
        console.log("그냥 끝났어요.")
    })
}, 3000 );


위 코드를 실행하면 "성공" 이 출력된다. 하나하나 살펴보자.

function promiseStudy(param){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            if(param){
                resolve("성공")
            }else{
                reject("실패")
            }
        }, 3000)
    })
}
  • 이 함수는 Promise를 반환한다. Promise는 위처럼 두가지 상태를 받는다. resolve, reject는 각각 상황에서 취할 function이다.
setTimeout( function(){
    promiseStudy(true).then(function(temp){
        console.log(temp)
    })

    promiseStudy(true).then(function(){
        console.log("그냥 끝났어요.")
    })
}, 3000 );
  • 같은 프로미스의 두 다른 then을 정의할 수 있다.
const promise = promiseStudy(true).then(
    ()=>{
        console.log("성공시 나올거에요.")
    },
    ()=>{
        console.log("실패시 나올거에요.")
    }
)

setTimeout( function(){
    promise.then(()=>{
        console.log("성공하면 두개 나와요")
    })
}, 3000 );

이런것도 되더라!! promise 참 신기한 녀석이다.

그런데 만약

function promiseStudy(param){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            if(param){
                resolve("성공")
            }else{
                reject("실패")
            }
        }, 3000)
    })
}

const promise = promiseStudy(true).then(
    (result)=>{
        return result;
    },
    (result)=>{
        return result;
    }
)

const promiseResult = promise.then((result) => {return result});

console.log(promiseResult)

이런 코드가 있다고 해보자. 지금 promiseResult는 기다리지 않기 때문에 현재 출력값은 Promise { <pending> } 가 된다.
이것을 원하지 않을 것이다. 그렇다고 위처럼 계속 setTime을 할 수도 없다.

때문에 async await을 활용해본다.

async function setValue() {
    const promiseResult = await promiseStudy(true).then(
        (result)=>{
            return result;
        },
        (result)=>{
            return result;
        }
    )

    console.log(promiseResult)
}

setValue();

이렇게 사용할수가 있다.