본문 바로가기
프론트엔드/javascript

try catch

by 느바 2025. 2. 2.
반응형

try catch

try...catch 문은 예외 처리(Exception Handling)를 위해 사용됩니다. 코드 실행 중 오류가 발생하면 try 블록에서 예외가 감지되고, catch 블록에서 해당 예외를 처리할 수 있습니다. 이를 통해 프로그램이 예상치 못한 오류로 인해 중단되는 것을 방지할 수 있습니다.

try...catch 문 기본 구조

try {
    // 오류가 발생할 가능성이 있는 코드
} catch (error) {
    // 오류가 발생했을 때 실행되는 코드
} finally {
    // 선택적으로 사용 가능하며, 오류 발생 여부와 관계없이 실행됨
}

finally 블록은 예외 발생 여부와 상관없이 실행되는 부분으로, 주로 리소스 정리 등에 사용됩니다.


fetch와 async/await을 활용한 예제

아래는 fetch를 사용하여 데이터를 가져오는 비동기 함수에서 try...catch를 이용해 오류를 처리하는 예제입니다.

async function fetchData(url) {
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`HTTP 오류! 상태 코드: ${response.status}`);
        }

        const data = await response.json();
        console.log("데이터 가져오기 성공:", data);
        return data;
    } catch (error) {
        console.error("데이터 가져오기 실패:", error.message);
    }
}

// 사용 예시
fetchData("https://jsonplaceholder.typicode.com/posts/1");

코드 설명

  1. fetchData 함수는 async 키워드를 사용하여 비동기 함수로 선언됩니다.
  2. try 블록 내부에서 fetch를 사용하여 url에서 데이터를 가져옵니다.
  3. 응답이 정상적인지 확인하기 위해 response.ok를 검사하며, 오류가 있으면 throw를 이용해 예외를 발생시킵니다.
  4. await response.json()을 사용하여 JSON 데이터를 변환하고 출력합니다.
  5. 오류가 발생하면 catch 블록에서 이를 감지하고 console.error를 통해 오류 메시지를 출력합니다.

이러한 방식으로 네트워크 요청에서 발생할 수 있는 예외를 처리하고, 사용자에게 적절한 피드백을 제공할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/try...catch

 

try...catch - JavaScript | MDN

try...catch 문은 try 블록과 catch 블록, finally 블록 중 하나 혹은 두 블록으로 구성됩니다. try 블록 내 코드가 먼저 실행되고, 만약 그 안에서 예외가 발생한다면 catch 블록 내 코드가 실행됩니다. final

developer.mozilla.org

 

반응형

'프론트엔드 > javascript' 카테고리의 다른 글

getter setter  (1) 2025.02.02
requestpointerlock API  (1) 2025.01.31
Web Crypto API  (1) 2025.01.19
requestAnimationFrame vs setInterval  (0) 2025.01.12
Node.js vs Express.js  (0) 2025.01.05