よくある間違いは仕方JSをキャプチャ

`JS`一般的なエラーのキャプチャ方法

同期エラー

まず、`SyntaxError`：構文エラー

構文エラーこのタイプのエラーは、事前に解決中に遭遇した場合、それは全体の原因となりますjsファイルを実行することはできませんが。でvue構文エラーがある場合は、直接プロジェクトを実行しませんが、パッケージには、エラーを指示します

II `Uncaught ReferenceError`：参照エラー

参照変数が存在しない場合にエラーが発生します。値を割り当て、オペレーティング結果や機能の割り当ての関数として、オブジェクトに割り当てることができません。このようなエラーはすることができますtry-catchキャプチャ

try {
    a()
} catch(e) {
	console.log('捕获到错误引用的错误==>',e)
    // 捕获到错误引用的错误==> Uncaught ReferenceError: a is not defined
}
复制代码

III `RangeError`：範囲エラー

RangeErrorエラーは場合にのみ、範囲外に発生した場合。いくつかの主要なケースがあり、第一の配列の長さは負であり、第二は、あるNumber範囲の外法オブジェクトパラメータ、および最大スタック機能を超えます。このようなエラーはすることができますtry-catchキャプチャ

try{
    [].length=-5
} catch(e) {
    console.log('捕获到范围错误==>',e)
    // 捕获到范围错误==> Uncaught RangeError: Invalid array length
}
复制代码

第四に、`TypeError`種類：エラー

パラメータが期待される形ではない場合、変数、またはエラーが発生します。新しいコマンドのパラメータは、コンストラクタでなければなりませんので、たとえば、元の型を使用すると、このエラーがスローされますなど、オブジェクトは新しい文字列、ブールに存在しません呼び出します。このようなエラーはすることができますtry-catchキャプチャ

try{
    const a = {}
    a()
} catch(e) {
    console.log('捕获到类型错误==>',e)
    // 捕获到类型错误==> TypeError: a is not a function
}
复制代码

第五に、`URIError,URL`エラー

相関関数の主なパラメータが正しくありません、URIパラメータ誤差が主に関与する、ときに誤ってスローencodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape(）6つの機能を。このようなエラーはすることができますtry-catchキャプチャ

try{
    decodeURI('%')
} catch(e) {
    console.log('捕获URI错误==>',e)
    // 捕获URI错误==> URIError: URI malformed
    //                       at decodeURI (<anonymous>)
}
复制代码

非同期エラー

まず、`promise/async-await`エラー

Promise非同期プログラミングは、従来のソリューションに比べソリューションですcallbackよりエレガント。これは、最初に提案し、コミュニティによって実装されましたES6でネイティブ標準言語に書き込まれ、統一された使用方法、Promiseオブジェクト。Promiseコールバックが地獄を避けるが、しかし、問題がある場合、使用することはできませんtry-catchキャプチャするために、それが私たちの過ちをキャプチャし、処理し、不必要なトラブルを引き起こしそうです。

幸いなことに、ES8彼はして参加しasync/awaitサポートし、我々は言うだろう异步函数、これは非常に便利な機能です。async/await全体のコードは非常にシンプルに見えるように我々は、コールバック地獄の頭痛から解放されます。async-await私たちが使用できる追加try-catchの非同期をトラップするエラーを

async function test (){
    try {
        // 假设a是一个异步函数
        await a()
    } catch(e){
        console.log('捕获到异步的错误==>',e)
    }
}
复制代码

第二に、`settimeout/setinterval/callBack`エラー

でvue使用することができwindow.onerror()聴くことsettimeout/setinterval/callBack間違いを。

window.onerror = (message,url,lineNo,cloumnNo,error) => {
    // message 错误信息
    // url 文件名
    // lineNo 行号
    // cloumnNo 列号
    // error 错误信息
}
复制代码

リソース負荷エラー

使用しwindow.addEventListener('error')、捕獲をwindow.onerrorより少ないリソースの読み込みエラーを捕捉し、window.onerrorかつwindow.addEventListener('error')類似点と相違点：同じポイントをキャプチャすることが可能windowでjs、実行時エラーが発生しました。1.違いは、異なるエラーパラメータ2.キャプチャがあることであるwindow.addEventListener('error')リソースの読み込みエラーをキャプチャすることができますが、window.onerrorリソースの読み込みエラーをキャプチャすることはできません

AJAXリクエストエラー

このエラーは、エラーをキャプチャリクエストインターセプタaxiosで行うことができます

ます。https：//juejin.im/post/5d036c036fb9a07efe2db97eで再現