JavaScriptエラーキャプチャの詳細な説明

JavaScriptエラーキャプチャの詳細な説明

1. 基本的な使い方とロジック

使用

試す{
    //コード....
}キャッチ(エラー){
    //エラー処理
}ついに{
    // try/catch で何が起こっても (エラーが発生しても発生しなくても)、finally ステートメント内のこのコードは実行される必要があります。 
}

論理

2. 特徴

try...catch は実行時エラーに対してのみ機能し、インタープリタエラーに対しては適切に機能しません。

試す{
    {{{{{{{
}キャッチ(エラー){
    コンソール.エラー(err)
}
// エンジンは「解析時」にミスを犯し、コードを理解できず、それをキャッチできなかった。

try...catch は同期的にのみ動作します

試す{
    setTimeout(関数(){
        未定義変数;
    },1000)
}キャッチ(エラー){
    コンソール.エラー(err)
}
//setTimeoutのコールバック関数が実行されると、エンジンはtry...catch構造を離れます

最後に、tryブロック内のreturn文を無効にすることができます。

関数テスト(){
  試す {
    1 を返します。
  } キャッチ(エラー) {
    2を返します。
  ついに
    3 を返します。
  }
}
コンソールにログ出力します。
//3

3. エラーオブジェクト

プログラムでエラーが発生すると、エラーの詳細を含むオブジェクトがjs内に生成され、そのオブジェクトがcatchにパラメータとして渡されます。

すべての組み込みエラーと同様に、エラーオブジェクトには2つの主要なプロパティがあります。

  • 名前エラータイプ
  • メッセージテキストタイプエラーメッセージ
  • スタック(非標準属性)エラー発生時の呼び出しスタック情報。主にデバッグに使用されます。
試す {
  lalala; // エラー、変数が定義されていません。
} キャッチ (エラー) {
  alert(err.name); // 参照エラー
  alert(err.message); // lalala は定義されていません
  alert(err.stack); // ReferenceError: lalala は (...call stack) で定義されていません

  // エラー全体を表示することもできます
  // エラーは「name: message」という文字列に変換されます
  alert(err); // ReferenceError: lalala は定義されていません
}

理論的には、何でもエラー オブジェクトとしてスローできますが、組み込みのエラー オブジェクトとの互換性を保つために、名前とメッセージを持つオブジェクトをスローするのがベスト プラクティスです。

追加: 組み込みエラーオブジェクト

物体意味
参照エラー未定義の変数が参照されたときにトリガーされます
構文エラー不正な文法構造が使用された場合にトリガーされます
タイプエラー値の型が予期しないときにトリガーされます
URIエラーencodeURI()、decodeURI() などのグローバル URI 関数が誤って使用された場合にトリガーされます。
範囲エラー配列コンストラクタに間違った長さの値を使用したり、Number.toExponential()、Number.toFixed()、Number.toPrecision() などに無効な数値を使用したりします。
評価エラーグローバル関数 eval() でエラーが発生しました

4. キャッチアンドスロー戦略の改善

エラーをキャッチするのは、プログラムのクラッシュを防ぐためだけではなく、デバッグを容易にし、バグを見つけるためにも重要です。そのため、エラー処理戦略は、コーディング者の優雅さを少し反映することができます。

諺にあるように、コーダーは常にエレガントです。知っているエラーだけをキャッチするという原則に従うようにしてください。

梨を持ち上げて

json = '{ "age": 30 }'; 
試す{
  user = JSON.parse(json); とします。  
  アラート(ユーザー名);
} キャッチ (エラー) {
  console.error('JSON エラー:'+err);
}

上記の例の catch 戦略は、プログラムの正常な動作を保証できます。これは、catch ブロックが内部のすべてのエラーをキャッチできるためです。JSON.parse のエラーでも、user.name が存在しないエラーでも、どちらもキャッチできます。ただし、両方のエラーを同じように印刷することは、デバッグには役立ちません。次のように記述する方がよいでしょう。

json = '{"age":30}' とします
試す{
  user = JSON.parse(json); とします。
  アラート(ユーザー名)
}キャッチ(エラー){
   if (err instanceof SyntaxError) {
       console.error('JSON エラー:'+err);
   }
   それ以外の場合はエラーをスローします。
}

各 catch ブロックは、発生する可能性があるとわかっているエラーを処理します。つまり、プログラミング時に、プログラマーは予想されるエラーをキャッチし、予想していなかったエラーを破棄します。

5. Promiseのエラー処理

ご存知のとおり、Promise はエラーを吸収します。これは、Promise の実装がすべてのエラーを内部でキャプチャし、キャプチャされたエラーが外部 (Promise の外部) にスローされず、チェーンに沿って最も近い onreject コールバックを見つけることによって渡されるためです。そのため、Promise エラーを処理する方法は 2 つしかありません。

  1. onrejectコールバックを設定する
  2. グローバルキャプチャ

例えば

試す{
    新しいPromise((resolve,reject)=>{
        新しいエラーをスローします('promise error')
    }).catch(()=>{
        // エラーは最新の onreject コールバックでキャッチされます console.error(err);
    })
}キャッチ(エラー){
    // 実行されず、Promise はエラーを飲み込む
    コンソールエラー(err);
}

また、executor 関数または promise ハンドラーに関係なく、内部で発生するすべてのエラーは取り込まれ、暗黙的にキャッチされることと同等であることに注意してください。エラーは自動的に最も近い onreject コールバックを見つけて渡します。

試す{
    新しいPromise((resolve,reject)=>{
        解決する();
    })。そして()=>{
        新しい Error をスローします ('promise then error')。
    }).catch((エラー){
        コンソールエラー(err);
    })
}キャッチ(エラー){
    //console.error(err) は地球が破壊されるまで実行されません
}

同様に、エラーが見つかりonrejectに渡される前は、onrejectコールバックが見つかり処理されるまで、それまでに登録されたonfulfilledコールバックはすべて無効です。onrejectコールバック後のonfulfilledコールバックは正常です。

試す {
    新しい Promise((resolve, 拒否) => {
        新しいエラーをスローします('promise error')
    }).then((ret) => {
        //エラーは処理されず、失敗します console.log('then1:' + ret)
    }).catch((エラー) => {
        //エラーが処理され、後続のシーケンスは通常どおりです console.error(err);
        '処理済み' を返す
    }).then((ret) => {
        //通常実行 console.log('then2' + ret);
    })
} キャッチ (エラー) {
    //同様に、人類が滅亡するまでconsole.error(err)は実行されません
}

// エラー: プロミスエラー
//その後処理される

チェーン全体にキャッチが設定されていない場合はどうなりますか?

そして、このエラーは地球の中心を貫通してグローバル環境まで浸透し、異なるホスト環境に応じて異なるグローバルイベントをトリガーします。たとえば、ブラウザでは unhandledrejection イベントがトリガーされ、ノード環境でも unhandledRejection イベントがトリガーされます。通常、このイベントは監視され、その後、プログラマーまたはユーザーに情報が表示されます。

追加 1: Chromium / v8 / v8 / 3.29.45 の Promise 内部エラー キャプチャ

追加2: async/await エラーキャプチャ

6. パフォーマンスの低下

V8 バージョン 6 (Node 8.3 および最新の Chrome に同梱) 以降では、try-catch 内のコードのパフォーマンスは通常のコードと同じです。 ------ 爆栈網

(少しテストしてみましたが、違いはあまりありませんでした)

以上がJavaScriptエラーキャプチャの詳しい説明です。JavaScriptエラーキャプチャの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • JavaScriptはDOMイベントハンドラをevent.jsとしてカプセル化し、低レベルのエラーが発生します。
  • Extjsの学習過程で初心者がよく遭遇する低レベルのエラーの蓄積
  • 知っておくべき 7 つのネイティブ JS エラーの種類
  • JavaScript ステートメント エラーのスロー、トライ アンド キャッチの例の分析
  • よくあるJSエラーと解決策の詳細な説明
  • JSエラー処理とデバッグ操作例の分析
  • JavaScript 初心者向けチュートリアルと Gobang アプレットの簡単な実装
  • JavaScript初心者は「new」を読む必要があります
  • JavaScript初心者がよく犯す間違い

<<:  Oracle と MySQL の高可用性ソリューションの比較分析

>>:  詳細なLinuxインストールチュートリアル

推薦する

CSSはグラデーションを巧みに利用して高度な背景光アニメーションを実現します

成し遂げるこの効果は CSS を使用して完全に再現することは困難です。 CSS でシミュレートされた...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

MySQL挿入パフォーマンスを最適化する方法の例

MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

複数の条件を持つ MySQL クエリ メソッド

複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...

CSSスタイルとセレクターの使い方

HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...

Vueリスナーの使用例の詳細な説明

1つ目はjQueryのajaxを使用してリクエストを送信することです ユーザーが登録するときに、リス...

Vue における Vue.use() の原理と基本的な使用法

目次序文1. 例で理解する2. ソースコードを分析する3. まとめ要約する序文他の人のコンポーネント...

MySQL 8.0.12 解凍版インストールチュートリアル個人テスト!

Mysql8.0.12 解凍版のインストール方法をテストしましたので、ご参考までに1. ダウンロー...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

JS でページのスクリーンショット機能を実装する方法

「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...

MySQLエラー10061を解決する方法

この記事では、「'localhost' (10061) の MySQL サーバーに接...

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...