ホームページ > ウェブフロントエンド > jsチュートリアル > さようなら例外!結果パターンを使用した JavaScript でのエラー処理をマスターする

さようなら例外!結果パターンを使用した JavaScript でのエラー処理をマスターする

DDD
リリース: 2024-11-28 22:46:12
オリジナル
506 人が閲覧しました

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

結果パターンは、try-catch ブロックに依存せずにエラーを処理するために、Rust、Go、C# (およびその他の言語) などの多くのプログラミング言語で使用される関数型プログラミングのアプローチです。これには、操作の結果を成功または失敗を明示的に示すオブジェクトとして表現することが含まれます。このパターンは、非同期プログラミングで特に役立ちます。

結果パターンとは何ですか?

結果パターンは、2 つの明示的な状態を使用して操作の結果を表します。

  • Success (Ok): 成功した値が含まれます。
  • 失敗 (エラー): エラーまたは失敗の理由が含まれます

結果パターンの実装方法

Result Utility オブジェクトを作成しましょう

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 の問題:
複数の操作を連鎖させる場合、1 つの例外によってフロー全体が中断される可能性があります。これらの例外を try-catch で処理すると、重要な定型文が追加されます。

結果パターンがどのように役立つか:
Result パターンは、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 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート