Try..Catch的注意事項(xiàng)有什么

這篇文章主要介紹“Try..Catch的注意事項(xiàng)有什么”，在日常操作中，相信很多人在Try..Catch的注意事項(xiàng)有什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Try..Catch的注意事項(xiàng)有什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

1.使用 try..catch..finally..throw

在 JS  中處理錯(cuò)誤，我們主要使用try、catch、finally和throw關(guān)鍵字。

• try塊包含我們需要檢查的代碼

• 關(guān)鍵字throw用于拋出自定義錯(cuò)誤

• catch塊處理捕獲的錯(cuò)誤

• finally 塊是最終結(jié)果無(wú)論如何，都會(huì)執(zhí)行的一個(gè)塊，可以在這個(gè)塊里面做一些需要善后的事情

1.1 try

每個(gè)try塊必須與至少一個(gè)catch或finally塊，否則會(huì)拋出SyntaxError錯(cuò)誤。

我們單獨(dú)使用try塊進(jìn)行驗(yàn)證：

try {   throw new Error('Error while executing the code'); }

? Uncaught SyntaxError: Missing catch or finally after try

1.2 try..catch

建議將try與catch塊一起使用，它可以優(yōu)雅地處理try塊拋出的錯(cuò)誤。

try {   throw new Error('Error while executing the code'); } catch (err) {   console.error(err.message); }

? ? Error while executing the code

1.2.1 try..catch 與 無(wú)效代碼

try..catch 無(wú)法捕獲無(wú)效的 JS 代碼，例如try塊中的以下代碼在語(yǔ)法上是錯(cuò)誤的，但它不會(huì)被catch塊捕獲。

try {   ~!$%^&* } catch(err) {   console.log("這里不會(huì)被執(zhí)行"); }

? ? Uncaught SyntaxError: Invalid or unexpected token

1.2.2 try..catch 與 異步代碼

同樣，try..catch無(wú)法捕獲在異步代碼中引發(fā)的異常，例如setTimeout：

try {   setTimeout(function() {     noSuchVariable;   // undefined variable   }, 1000); } catch (err) {   console.log("這里不會(huì)被執(zhí)行"); }

未捕獲的ReferenceError將在1秒后引發(fā):

? ? Uncaught ReferenceError: noSuchVariable is not defined

所以 ，我們應(yīng)該在異步代碼內(nèi)部使用 try..catch 來處理錯(cuò)誤：

setTimeout(function() {   try {     noSuchVariable;   } catch(err) {     console.log("error is caught here!");   } }, 1000);

1.2.3 嵌套 try..catch

我們還可以使用嵌套的try和catch塊向上拋出錯(cuò)誤，如下所示：

try {   try {     throw new Error('Error while executing the inner code');   } catch (err) {     throw err;   } } catch (err) {   console.log("Error caught by outer block:");   console.error(err.message); }

Error caught by outer block: ? ? Error while executing the code

1.3 try..finally

不建議僅使用 try..finally 而沒有 catch 塊，看看下面會(huì)發(fā)生什么：

try {   throw new Error('Error while executing the code'); } finally {   console.log('finally'); }

finally ? ? Uncaught Error: Error while executing the code

這里注意兩件事：

• 即使從try塊拋出錯(cuò)誤后，也會(huì)執(zhí)行finally塊

• 如果沒有catch塊，錯(cuò)誤將不能被優(yōu)雅地處理，從而導(dǎo)致未捕獲的錯(cuò)誤

1.4 try..catch..finally

建議使用try...catch塊和可選的finally塊。

try {   console.log("Start of try block");   throw new Error('Error while executing the code');   console.log("End of try block -- never reached"); } catch (err) {   console.error(err.message); } finally {   console.log('Finally block always run'); } console.log("Code execution outside try-catch-finally block continue..");

Start of try block ? ? Error while executing the code Finally block always run Code execution outside try-catch-finally block continue..

這里還要注意兩件事：

• 在try塊中拋出錯(cuò)誤后往后的代碼不會(huì)被執(zhí)行了

• 即使在try塊拋出錯(cuò)誤之后，finally塊仍然執(zhí)行

finally塊通常用于清理資源或關(guān)閉流，如下所示：

try {   openFile(file);   readFile(file); } catch (err) {   console.error(err.message); } finally {   closeFile(file); }

1.5 throw

throw語(yǔ)句用于引發(fā)異常。

throw <expression>

// throw primitives and functions throw "Error404"; throw 42; throw true; throw {toString: function() { return "I'm an object!"; } };  // throw error object throw new Error('Error while executing the code'); throw new SyntaxError('Something is wrong with the syntax'); throw new ReferenceError('Oops..Wrong reference');  // throw custom error object function ValidationError(message) {   this.message = message;   this.name = 'ValidationError'; } throw new ValidationError('Value too high');

2. 異步代碼中的錯(cuò)誤處理

對(duì)于異步代碼的錯(cuò)誤處理可以Promise和async await。

2.1 Promise 中的 then..catch

我們可以使用then()和catch()鏈接多個(gè) Promises，以處理鏈中單個(gè) Promise 的錯(cuò)誤，如下所示：

Promise.resolve(1)   .then(res => {       console.log(res);  // 打印 '1'        throw new Error('something went wrong');  // throw error        return Promise.resolve(2);  // 這里不會(huì)被執(zhí)行   })   .then(res => {       // 這里也不會(huì)執(zhí)行，因?yàn)殄e(cuò)誤還沒有被處理       console.log(res);       })   .catch(err => {       console.error(err.message);  // 打印 'something went wrong'       return Promise.resolve(3);   })   .then(res => {       console.log(res);  // 打印 '3'   })   .catch(err => {       // 這里不會(huì)被執(zhí)行       console.error(err);   })

我們來看一個(gè)更實(shí)際的示例，其中我們使用fetch調(diào)用API，該 API 返回一個(gè)promise對(duì)象，我們使用catch塊優(yōu)雅地處理 API 失敗。

function handleErrors(response) {     if (!response.ok) {         throw Error(response.statusText);     }     return response; }  fetch("http://httpstat.us/500")     .then(handleErrors)     .then(response => console.log("ok"))     .catch(error => console.log("Caught", error));

Caught Error: Internal Server Error     at handleErrors (<anonymous>:3:15)

2.2 try..catch 和 async await

在 async await 中 使用try..catch 比較容易：

(async function() {     try {         await fetch("http://httpstat.us/500");     } catch (err) {         console.error(err.message);     } })();

讓我們看同一示例，其中我們使用fetch調(diào)用API，該API返回一個(gè)promise對(duì)象， 我們使用try..catch塊優(yōu)雅地處理API失敗。

function handleErrors(response) {     if (!response.ok) {         throw Error(response.statusText);     } }  (async function() {     try {       let response = await fetch("http://httpstat.us/500");       handleErrors(response);       let data = await response.json();       return data;     } catch (error) {         console.log("Caught", error)     } })();

Caught Error: Internal Server Error     at handleErrors (<anonymous>:3:15)     at <anonymous>:11:7

3. JS 中的內(nèi)置錯(cuò)誤

3.1 Error

JavaScript 有內(nèi)置的錯(cuò)誤對(duì)象，它通常由try塊拋出，并在catch塊中捕獲，Error 對(duì)象包含以下屬性：

• name：是錯(cuò)誤的名稱，例如 “Error”, “SyntaxError”, “ReferenceError” 等。

• message：有關(guān)錯(cuò)誤詳細(xì)信息的消息。

• stack：是用于調(diào)試目的的錯(cuò)誤的堆棧跟蹤。

我們創(chuàng)建一個(gè)Error 對(duì)象，并查看它的名稱和消息屬性:

const err = new Error('Error while executing the code');  console.log("name:", err.name); console.log("message:", err.message); console.log("stack:", err.stack);

name: Error message: Error while executing the code stack: Error: Error while executing the code     at <anonymous>:1:13

JavaScript 有以下內(nèi)置錯(cuò)誤，這些錯(cuò)誤是從 Error 對(duì)象繼承而來的

3.2 EvalError

EvalError 表示關(guān)于全局eval()函數(shù)的錯(cuò)誤，這個(gè)異常不再由 JS 拋出，它的存在是為了向后兼容。

3.3 RangeError

當(dāng)值超出范圍時(shí)，將引發(fā)RangeError。

? [].length = -1 ? Uncaught RangeError: Invalid array length

3.4 ReferenceError

當(dāng)引用一個(gè)不存在的變量時(shí)，將引發(fā) ReferenceError。

? x = x + 1; ? Uncaught ReferenceError: x is not defined

3.5 SyntaxError

當(dāng)你在 JS 代碼中使用任何錯(cuò)誤的語(yǔ)法時(shí)，都會(huì)引發(fā)SyntaxError。

? function() { return 'Hi!' } ? Uncaught SyntaxError: Function statements require a function name  ? 1 = 1 ? Uncaught SyntaxError: Invalid left-hand side in assignment  ? JSON.parse("{ x }"); ? Uncaught SyntaxError: Unexpected token x in JSON at position 2

3.6 TypeError

如果該值不是預(yù)期的類型，則拋出TypeError。

? 1(); ? Uncaught TypeError: 1 is not a function  ? null.name; ? Uncaught TypeError: Cannot read property 'name' of null

3.7 URIError

如果以錯(cuò)誤的方式使用全局 URI 方法，則會(huì)拋出URIError。

? decodeURI("%%%"); ? Uncaught URIError: URI malformed

4. 定義并拋出自定義錯(cuò)誤我們也可以用這種方式定義自定義錯(cuò)誤。

class CustomError extends Error {   constructor(message) {     super(message);     this.name = "CustomError";   }  };  const err = new CustomError('Custom error while executing the code');  console.log("name:", err.name); console.log("message:", err.message);

name: CustomError message: Custom error while executing the code

我們還可以進(jìn)一步增強(qiáng)CustomError對(duì)象以包含錯(cuò)誤代碼

class CustomError extends Error {   constructor(message, code) {     super(message);     this.name = "CustomError";     this.code = code;   }  };  const err = new CustomError('Custom error while executing the code', "ERROR_CODE");  console.log("name:", err.name); console.log("message:", err.message); console.log("code:", err.code);

name: CustomError message: Custom error while executing the code code: ERROR_CODE

在try..catch塊中使用它：

try{   try {     null.name;   }catch(err){     throw new CustomError(err.message, err.name);  //message, code   } }catch(err){   console.log(err.name, err.code, err.message); }

到此，關(guān)于“Try..Catch的注意事項(xiàng)有什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！