Promise - finally, callback, 비동기 순차적

ex) fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally()를 설정하고, 함수를 인자로 넣는다.

function p(){
    return new Promise ((resolve, reject)=>{
        /* pending */
        setTimeout(()=>{
            reject(new Error('bad')); /* fulfilled */
        }, 1000);
    });
}


p()
.then((message)=>{
    console.log('1000ms 후에 fullfiled 된다.', message);
})
.catch((error)=>{
    console.log('1000ms 후에 rejected 된다.', error);
})
.finally(()=>{
    console.log('end');
});

//출력값
1000ms 후에 rejected 된다. Error: bad
    at <anonymous>:5:20
end

 

 

ex) 보통 비동기 작업을 할때, callback 함수를 인자로 넣어 로직이 끝나면 callback 함수를 호출한다. 이런 경우 함수가 아래로 진행되지 않고, callback 함수 안으로 진행된다.

function c(callback){
    setTimeout(()=>{
        callback();
    },2000);
}

c(()=>{
    console.log('1000ms 후에 callback 함수가 실행된다.');
});

c(()=>{
    c(()=>{
        c(()=>{
            console.log('3000ms 후에 callback 함수가 실행된다.');
        });
    });
});

//출력값
1000ms 후에 callback 함수가 실행된다.
3000ms 후에 callback 함수가 실행된다.

 

 

 

ex) then 함수에서 다시 프로미스 객체를 리턴하는 방법을 통해 체이닝하면, 비동기 작업을 순차적으로 아래로 표현할 수 있다. then에 함수를 넣는 여러 방법을 확인해보자.

function p(){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve();
        }, 1000)
    });
}

p().then(()=>{
    return p();
})
.then(()=> p())
.then(p)
.then(()=>{
    console.log('4000ms 후에 fulfilled 된다.')
})