ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 비동기 - 예외 처리
    JavaScript/JavaScript 2021. 8. 3. 14:49

     

    비동기 - 예외처리 (then, catch, finally)

     

    then

    - 작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환

    - 실행 순서를 보장

    - 콜백 지옥과 패턴이 동일해서 권장하지 않음

    - async & await 패턴을 사용하기 어려운 환경일때 대체해서 사용

    - 비동기 패턴을 대신해서 사용

    function a() {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('A')
          resolve()
        }, 1000)
      })
    }
    function test() {
      a().then(() => {
        console.log('B')
      })
    }
    test()
    
    /* 실행순서 */
    A
    B

     

    catch

    - 작업이 실패(거부)되면 Promise.reject() 메소드를 통해 거부하는 Promise 객체를 반환

    - 거부(reject) 되었을때 작동

    - .then() 부분은 실행되지 않음

    function a(number) {
      return new Promise((resolve, reject) => {
        if (number > 4) {
          // 거부
          reject()
          return
        }
        setTimeout(() => {
          console.log('A')
          // 이행
          resolve()
        }, 1000)
      })
    }
    function test() {
      a(5)
        .then(() => {
          console.log('Resolve!')
        })
        .catch(() => {
          console.log('Reject!')
        })
    }
    test()
    
    /* 실행결과 */
    Reject!

     

    finally

    - 이행 / 거부 결과에 상관없이 무조건 한번 실행되는 메소드

    function a(number) {
      return new Promise((resolve, reject) => {
        if (number > 4) {
          // 거부
          reject()
          return
        }
        setTimeout(() => {
          console.log('A')
          // 이행
          resolve()
        }, 1000)
      })
    }
    function test() {
      a(5)
        .then(() => {
          console.log('Resolve!')
        })
        .catch(() => {
          console.log('Reject!')
        })
        .finally(() => {
          console.log('Done!')
        })
    }
    test()
    
    /* 실행결과 */
    Reject!
    Done!

     

    async & await 예외 처리

    function a(number) {
      return new Promise((resolve, reject) => {
        if (number > 4) {
          // 거부
          reject()
          return
        }
        setTimeout(() => {
          console.log('A')
          // 이행
          resolve()
        }, 1000)
      })
    }
    async function test() {
      try {
        await a(5)
        console.log('Resolve!')
      } catch (error) {
        console.log('Reject!')
      }
    
    }
    test()
    
    /* 실행결과 */
    Reject!

    댓글

Designed by Tistory.