JS_문법 (6)_promise 메서드(catch, finally, all, race 등 )

catch 메서드

기본적으로 예외상황을 처리한다.

 

만약

failCallback이 정의되어 있지 않을 때에는

reject 시에 catch 메서드 호출된다.

(예외상황으로 인식)

 

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 11) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success', item)    
    })
    .catch((err) => {
        console.log(err)
    })
    
>>>
error

 

throw

강제로 사용자 정의 예외 발생 시킨다.

catch블록이 있다면 그 곳으로 전달되고

그렇지 않으면 프로그램을 종료한다.

 

throw new Error("에러메세지")

 

chaining

.then .catch 등으로 이어서 코드를 작성하는 것을 말한다.

 

chaining - catch

예외가 발생하면 chaining된 다음 코드를 동작하지 않고

catch로 넘어간다.

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success-1')
        throw new Error("딴") //예외발생
    })
    .then(() => {
        console.log('success-2') //건너뛰기
    })
    .catch(() => {
        console.log("err")
    })
    
>>>
success-1
err

 

chaining-return

chaining이 되어있을 때

return 값은 다음 chaining에 인자로 전달된다.

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success-1',item)
        return 1 //리턴값 1
    })
    .then((num) => {
        console.log('success-2',num) //인자를 출력했을 때 1
    })
    
>>>
success-1 10
success-2 1

 

finally

Promise가 resolve되든 reject되든 상관없이

마지막에 실행되는 함수

 

먼저 resolve 되었을 때

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success-1',item)
        return 1
    })
    .then((num) => {
        console.log('success-2',num)
    })
    .catch((err) => {
        console.log(err)
    })
    .finally(() => {
        console.log("Finish")
    })
    
>>>
success-1 10
success-2 1
Finish

 

이번에는 reject되었을 때!

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 90) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success-1',item)
        return 1
    })
    .then((num) => {
        console.log('success-2',num)
    })
    .catch((err) => {
        console.log(err)
    })
    .finally(() => {
        console.log("Finish")
    })

>>>
error
Finish

 

이때 catch와 finally의 순서를 뒤바꾸어 보자

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 90) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func
    .then((item) => { 	//successCallback
        console.log('success-1',item)
        return 1
    })
    .then((num) => {
        console.log('success-2',num)
    })
    .finally(() => {
        console.log("Finish")
    })
    .catch((err) => {
        console.log(err)
    })
    
>>>
Finish
error

이 경우에는

finally가 먼저 실행이 되고

catch가 실행이 된다.

 

일단 에러가 발생하면 프로그램은 종료된 것이기 때문에

finally를 실행하는 것이다.

 

Promise.all

동기화할 Promise들 모두 실행

다 끝낸 후 .then구문 실행

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("100ms"), 100)
})
const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("500ms"), 500)
})
const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("1500ms"), 1500)
})

Promise.all([promise1, promise2, promise3]) //동기화할 것들을 모두 실행
    .then((data) => { //promise1,2,3의 인자값 다 받아서 리스트로
        console.log(data) //리스트 출력
    })
    
>>>
[ '100ms', '500ms', '1500ms' ]

 

Promise.race

여러 Promise들 중 가장 빨리 완료한 것만

.then구문 실행

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("500ms"), 500)
})
const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("100ms"), 100)
})
const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("1500ms"), 1500)
})

// Promise.all([promise1, promise2, promise3])
//     .then((data) => {
//         console.log(data)
//     })
Promise.race([promise1, promise2, promise3])
    .then((data) => {
        console.log(data)
    })
    
>>>
100ms

가장 빠른 promise2만 .then구문이 실행되어

100ms만 출력되었다.