• 티스토리 홈
  • 프로필사진
    KIMJAVAN
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
KIMJAVAN
  • 프로필사진
    KIMJAVAN
    • 개발 (160)
      • 마크업 언어 (19)
        • HTML (7)
        • CSS (12)
      • 자바스크립트 (85)
        • JavaScript (34)
        • JS Library (6)
        • React (13)
        • threeJS (6)
        • TypeScript (2)
        • Next js (5)
        • Node JS (18)
        • webGL (1)
      • AI (4)
        • chat-gpt (4)
      • flutter (17)
        • dart (11)
        • flutter (6)
      • Sql (3)
      • PHP (4)
      • Python (2)
      • Git (4)
      • vscode (1)
      • 개발 도움 사이트 (7)
      • 작업기록 (1)
      • 오류 모음 (3)
      • 메모장 (7)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [Node JS] try catch / then catch
        2024년 01월 16일
        • KIMJAVAN
        • 작성자
        • 2024.01.16.오후03:40
        728x90

        then/catch와 try/catch는 JavaScript에서 비동기 작업을 처리하고 오류를 관리하는 두 가지 다른 방법입니다. 이들은 Promise를 다룰 때 주로 사용됩니다. 아래에 각각의 사용 예시와 차이점을 설명하겠습니다.

        then/catch 예시:

        javascriptCopy code
        function getData() { fetch('https://example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); }
        • then: Promise가 성공적으로 완료되었을 때 실행될 콜백 함수를 정의합니다.
        • catch: Promise 처리 중 발생한 오류를 처리하기 위한 콜백 함수를 정의합니다.

        try/catch with async/await 예시:

        javascriptCopy code
        async function getData() { try { const response = await fetch('https://example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } }
        • async/await: async 키워드는 함수가 비동기 함수임을 나타냅니다. await 키워드는 Promise의 결과를 기다립니다.
        • try/catch: try 블록 안에서 실행된 코드에서 오류가 발생하면, catch 블록의 코드가 실행됩니다.

        차이점:

        1. 문법적 차이:
          • then/catch: 체인 형태로 연결되어, 각 단계마다 별도의 콜백 함수를 사용합니다.
          • try/catch with async/await: 동기 코드와 유사한 방식으로 비동기 코드를 작성할 수 있습니다. 코드가 더 선형적이고 읽기 쉽습니다.
        2. 오류 처리의 차이:
          • then/catch: 각 then 또는 catch 블록은 독립적입니다. 한 then 블록에서 발생한 오류가 다음 then 블록에 영향을 주지 않습니다.
          • try/catch with async/await: try 블록 내부에서 발생하는 모든 오류는 같은 catch 블록으로 전달됩니다.
        3. 코드 가독성:
          • then/catch: 비동기 로직이 복잡하거나 여러 단계가 있는 경우, 코드가 중첩되고 복잡하게 될 수 있습니다. 각 단계에서 별도의 콜백 함수를 사용하기 때문에, 코드가 길어질수록 추적하기 어려워질 수 있습니다.사용상의 차이:try/catch with async/await: ES2017에서 도입된 async/await는 비동기 작업을 동기적인 방식으로 작성할 수 있게 해줍니다. await 키워드는 함수 실행을 일시 중지하고, Promise의 결과가 준비될 때까지 기다린 후 계속 진행합니다.then/catch는 단순한 비동기 작업에 적합하며, 각 단계별로 다른 로직을 적용해야 할 때 유용합니다.최종적으로는 개발자의 선호와 특정 상황에 따라 적절한 방법을 선택하는 것이 중요합니다. 둘 다 강력한 도구이며, 각각의 장단점을 이해하고 상황에 맞게 사용하는 것이 좋습니다.
          • try/catch with async/await는 복잡한 비동기 로직을 다룰 때 더 적합하며, 코드의 가독성과 유지보수성을 향상시키는 데 도움이 됩니다.
          • 선택 기준:
          • then/catch: Promise 기반의 비동기 작업에 주로 사용됩니다. 각 단계별로 성공과 실패를 처리하는 방식을 명시적으로 구분할 수 있습니다.
          • try/catch with async/await: 코드가 더 선형적이고 동기적인 코드와 유사하게 보입니다. 이로 인해 코드의 흐름을 이해하고 디버깅하기가 더 쉬워집니다. 복잡한 비동기 로직도 더 간결하고 명확하게 표현할 수 있습니다.

         

         

         

         


         

         

         

        1. then/catch:
          • then 메소드는 Promise가 성공적으로 완료됐을 때 실행될 콜백 함수를 받습니다. catch 메소드는 Promise 처리 중 발생한 오류를 처리하기 위한 콜백 함수를 받습니다.
          • then 또는 catch 블록은 체인 형태로 연결됩니다. 각 then 블록은 독립적으로 작동하며, 하나의 then 블록에서 발생한 오류는 그 다음 then 블록으로 전달되지 않습니다. 오류가 발생하면, 체인 내에서 가장 가까운 catch 블록으로 전달됩니다.
          • 이는 각 then 블록이 자신의 작업을 완료하고, 그 결과를 다음 then 블록으로 전달하는 방식으로 작동한다는 것을 의미합니다. 오류 처리는 각 then 블록 이후에 올 수 있는 catch 블록에서만 처리됩니다.
        2. try/catch with async/await:
          • async 키워드는 함수가 비동기 함수임을 나타내며, await 키워드는 Promise의 결과를 기다립니다. try 블록 안에서 await 표현식을 사용하여 비동기 작업을 수행합니다.
          • try 블록 내에서 발생하는 모든 오류는 catch 블록으로 전달됩니다. 이는 try 블록 내의 모든 코드에 대한 오류 처리가 catch 블록에서 일괄적으로 이루어진다는 것을 의미합니다.
          • 즉, try 블록 내의 여러 비동기 작업 중 어느 하나에서라도 오류가 발생하면, 실행 흐름은 즉시 catch 블록으로 넘어가며, try 블록 내의 나머지 코드는 실행되지 않습니다.

        이 두 방식의 차이는 주로 오류 처리의 범위와 코드의 실행 흐름에서 발생합니다. then/catch는 체인의 각 단계에서 발생하는 오류를 개별적으로 처리하는 반면, try/catch with async/await는 try 블록 전체의 오류를 일

        이 두 방식의 차이는 주로 오류 처리의 범위와 코드의 실행 흐름에서 발생합니다. then/catch는 체인의 각 단계에서 발생하는 오류를 개별적으로 처리하는 반면, try/catch with async/await는 try 블록 전체의 오류를 일괄적으로 처리합니다.

        • then/catch: then과 catch는 Promise 체인의 각 단계에서 독립적으로 작동합니다. 한 then 블록에서 발생한 오류는 다음 then 블록으로 전달되지 않고, 대신 다음 catch 블록으로 전달됩니다. 이렇게 각 단계에서 오류를 분리하여 처리할 수 있습니다.
        fetchData()
          .then(result1 => {
              // 첫 번째 then 블록의 코드
          })
          .then(result2 => {
              // 두 번째 then 블록의 코드
              // 여기서 발생한 오류는 다음 then 블록으로 전달되지 않음
          })
          .catch(error => {
              // 첫 번째 또는 두 번째 then 블록에서 발생한 오류를 처리
          });
          • try/catch with async/await: try 블록 내부에서 여러 개의 await
        • try/catch with async/await: try 블록 내부에서 여러 개의 await 표현식을 사용할 수 있으며, 이 중 어느 하나에서 오류가 발생하면 즉시 catch 블록으로 이동합니다. 따라서 try 블록 내의 모든 코드에 대한 오류 처리가 catch 블록에서 일괄적으로 이루어집니다. 이 방식은 try 블록 내부의 모든 비동기 작업이 하나의 오류 처리 단위로 묶인다는 것을 의미합니다.
        async function fetchData() {
            try {
                const result1 = await fetchSomeData(); // 첫 번째 비동기 작업
                const result2 = await processResult(result1); // 두 번째 비동기 작업
                // 더 많은 비동기 작업이 있을 수 있음
            } catch (error) {
                // try 블록 내의 어느 부분에서든 오류가 발생하면 여기서 처리
            }
        }

        이러한 차이점 때문에, then/catch는 각 단계에서 독립적인 오류 처리가 필요할 때 유용하며, try/catch with async/await는 코드의 흐름을 더 명확하게 하고 오류 처리를 일괄적으로 관리하고 싶을 때 적합합니다. async/await를 사용하면 코드가 더 선형적이고 읽기 쉬워지며, 복잡한 비동기 로직을 더 쉽게 관리할 수 있습니다.

        저작자표시 비영리 변경금지 (새창열림)

        '자바스크립트 > Node JS' 카테고리의 다른 글

        [Node JS] 기본 개념 정리  (0) 2024.01.24
        [Node JS] put - controller  (0) 2024.01.19
        [Node JS] Router - Controller - Model 연결구조 (post)  (0) 2024.01.16
        [Node JS] 라우터 - 컨트롤러 - 백엔드 연결  (1) 2024.01.10
        [Node Js] 백엔드 config  (0) 2024.01.09
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
        김자반 개발노트개발하면서 기록할 내용을 업로드합니다. :: Front-end, Back-end, Server, AI
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
      • then/catch 예시:
      • try/catch with async/await 예시:
      • 차이점:
      • 안녕하세요
      • 감사해요
      • 잘있어요

      티스토리툴바

      단축키

      내 블로그

      내 블로그 - 관리자 홈 전환
      Q
      Q
      새 글 쓰기
      W
      W

      블로그 게시글

      글 수정 (권한 있는 경우)
      E
      E
      댓글 영역으로 이동
      C
      C

      모든 영역

      이 페이지의 URL 복사
      S
      S
      맨 위로 이동
      T
      T
      티스토리 홈 이동
      H
      H
      단축키 안내
      Shift + /
      ⇧ + /

      * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.