>웹 프론트엔드 >JS 튜토리얼 >안녕 예외! 결과 패턴을 사용하여 JavaScript의 오류 처리 마스터하기

안녕 예외! 결과 패턴을 사용하여 JavaScript의 오류 처리 마스터하기

DDD
DDD원래의
2024-11-28 22:46:12544검색

Goodbye Exceptions! Mastering Error Handling in JavaScript with the Result Pattern

결과 패턴은 Try-catch 블록에 의존하지 않고 오류를 처리하기 위해 Rust, Go, C#(및 기타 언어)과 같은 많은 프로그래밍 언어에서 사용되는 함수형 프로그래밍 접근 방식입니다. 여기에는 작업 결과를 성공 또는 실패를 명시적으로 나타내는 개체로 나타내는 것이 포함됩니다. 이 패턴은 비동기 프로그래밍에 특히 유용합니다.

결과 패턴은 무엇입니까?

결과 패턴은 두 가지 명시적 상태를 사용하여 작업의 결과를 나타냅니다.

  • 성공(Ok): 성공한 값을 포함합니다.
  • 실패(Err): 오류 또는 실패 이유를 포함합니다

결과 패턴을 구현하는 방법

결과 유틸리티 개체를 만들어 보겠습니다

const Result = {
  Ok: (value) => ({ isOk: true, value }),
  Err: (error) => ({ isOk: false, error }),
};

이 결과 패턴을 비동기 함수에 사용해 보겠습니다

const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return Result.Err(`HTTP error: ${response.status}`);
    }
    const data = await response.json();
    return Result.Ok(data);
  } catch (err) {
    return Result.Err(err.message);
  }
};

const main = async () => {
  const result = await fetchData("https://jsonplaceholder.typicode.com/posts");
  if (result.isOk) {
    console.log("Success:", result.value);
  } else {
    console.error("Error:", result.error);
  }
};

main();

결과 패턴의 이점

1. 가독성 향상: 중첩된 try-catch 블록 방지
try-catch 문제:
오류 처리를 위해 try-catch를 사용하면 여러 작업을 처리할 때 코드가 깊게 중첩될 수 있습니다. 이로 인해 코드를 읽고 유지 관리하기가 더 어려워집니다.

결과 패턴의 주요 이점은 결과 패턴이 오류를 반환 값의 일부로 캡슐화하여 중첩된 try-catch 블록이 필요하지 않다는 것입니다. 오류 처리 논리가 더 깔끔하고 구조화되었습니다.

중첩된 try-catch 예외의 예를 살펴보겠습니다

const process = async (data) =>{
    // YOUR LOGIC TO PROCESS THE DATA
    return result
}

const processData = async () => {
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await response.json();
      try {
        const processedData = process(data);
        return processedData;
      } catch (processError) {
        console.error("Error processing data:", processError);
      }
    } catch (fetchError) {
      console.error("Error fetching data:", fetchError);
    }
};

이제 결과 패턴을 사용하여 동일한 데이터 가져오기 논리를 구현해 보겠습니다

const process = async (data) =>{
    // YOUR LOGIC TO PROCESS THE DATA
    return result
}

const processData = async () => {
  const fetchResult = await fetchData("https://jsonplaceholder.typicode.com/posts");
  if (!fetchResult.isOk) return fetchResult;

  const processResult = process(fetchResult.value);
  return processResult;
};

2. 명시성: 실패 가능성을 명확하게 전달
암시적 오류 처리 문제:
JavaScript 함수는 암시적으로 오류를 발생시킬 수 있으므로 명시적으로 문서화하지 않으면 함수가 실패할지 여부가 불분명해집니다. 이로 인해 예상치 못한 런타임 오류가 발생할 수 있습니다.

결과 패턴이 어떻게 도움이 되는지:
결과 패턴은 작업의 성공 여부를 알리는 Ok 또는 Err을 명시적으로 반환합니다. 이렇게 하면 함수의 동작을 예측 가능하고 추론하기가 더 쉬워집니다.

암시적 오류 처리 예시

const processUserInput = (input) => {
  if (!input || input.trim() === "") {
    throw new Error("Input cannot be empty");
  }
  return `Processed: ${input}`;
};

결과 패턴을 사용한 명시적 오류 처리의 예

const processUserInput = (input) => {
  if (!input || input.trim() === "") {
    return Result.Err("Input cannot be empty");
  }
  return Result.Ok(`Processed: ${input}`);
};

const userInput = "  ";
const result = processUserInput(userInput);

if (result.isOk) {
  console.log("Success:", result.value);
} else {
  console.error("Failure:", result.error);
}

3. 구성성: 체인 작업이 더 쉬워졌습니다
try-catch 문제:
여러 작업을 연결하는 경우 하나의 예외로 인해 전체 흐름이 중단될 수 있습니다. try-catch로 이러한 예외를 처리하면 상당한 상용구가 추가됩니다.

결과 패턴이 어떻게 도움이 되는지:
결과 패턴은 Ok 값을 전달하고 첫 번째 Err에서 실행을 중지하여 구성을 단순화합니다. 이를 통해 명확하고 예측 가능한 작업 흐름이 보장됩니다.

결과가 없는 패턴의 예

const Result = {
  Ok: (value) => ({ isOk: true, value }),
  Err: (error) => ({ isOk: false, error }),
};

결과 패턴 예시

const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return Result.Err(`HTTP error: ${response.status}`);
    }
    const data = await response.json();
    return Result.Ok(data);
  } catch (err) {
    return Result.Err(err.message);
  }
};

const main = async () => {
  const result = await fetchData("https://jsonplaceholder.typicode.com/posts");
  if (result.isOk) {
    console.log("Success:", result.value);
  } else {
    console.error("Error:", result.error);
  }
};

main();

결론

결과 패턴은 JavaScript의 오류 처리를 위한 try-catch에 대한 강력하고 우아한 대안을 제공합니다. 향상된 가독성, 명시적인 오류 처리 및 구성 가능성을 제공하여 비동기식 워크플로의 견고성과 예측 가능성을 향상시킵니다.

복잡한 논리 또는 여러 비동기 작업을 사용하는 경우 결과 패턴을 사용하여 코드를 더 깔끔하고 유지 관리하기 쉽게 만드는 것을 고려해 보세요.

이 패턴에 대해 자유롭게 의견을 제시해 주세요. 오타가 있으면 사과드립니다.

위 내용은 안녕 예외! 결과 패턴을 사용하여 JavaScript의 오류 처리 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.