자바스크립트/Node JS

[Node JS] try catch / then catch

KIMJAVAN 2024. 1. 16. 15: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를 사용하면 코드가 더 선형적이고 읽기 쉬워지며, 복잡한 비동기 로직을 더 쉽게 관리할 수 있습니다.

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