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 を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...

CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...

MySQL 8.0 をインストールした後、初めてログインするときにパスワードを変更する問題を解決する

MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...

PXEを使用してLinuxシステムを自動的に展開する方法

目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...

MySQLメモリストレージエンジンに関する知識

メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...

MySQL Shellの紹介とインストール

目次01 レプリ​​カセットアーキテクチャ02 MySQL Shellの紹介とインストール03 My...

Dockerとiptablesとブリッジモードのネットワーク分離と通信操作の実装

Docker は、ブリッジ、ホスト、オーバーレイなどの複数のネットワークを提供します。同じ Dock...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

MySQLクエリ結果をCSVにエクスポートする方法

MySQL クエリ結果をcsvにエクスポートするには、通常、php を使用して mysql に接続し...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

Dockerの国内イメージソースを変更する方法

Dockerデーモンのアクセラレータを構成する設定ファイルから Docker を起動し、/etc/d...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...

nginxはdockerコンテナ内に設定ファイルを自動的に生成します

企業が Docker 自動デプロイメントを構築する場合、Docker の実行時にコンテナ内の設定ファ...