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インストールチュートリアル

推薦する

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

MySQL無料インストールバージョンの設定チュートリアル

この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...

MySQLで時間を判定条件として使用する方法

背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

ウェブデザインでテキストのサイズを合わせる方法: 小さなテキスト、大きな体験

iPadなどのモバイル端末の普及により、人々がモバイル端末で読書に費やす時間はますます長くなり、読...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

Squid を使用して http および https 用のプロキシ サーバーを構築する方法

nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

CentOS 7.4 に MySQL 5.7 を手動でインストールする方法

MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...

MySQLインデックスの簡単な分析

データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...

MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します

以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...