在任何一门语言中,都需要错误处理部分。
因为它是确保代码健壮性和用户体验的重要部分。
JavaScript 的错误处理主要包括以下几个:
try...catch 语句:这是最常用的错误处理方式。try
块包含可能会抛出错误的代码,而catch
块则处理这些错误。finally
块中的代码无论是否发生错误都会执行,通常用于清理资源或执行收尾工作。
throw 语句:可以使用throw
语句手动抛出错误。抛出的错误可以是任何类型,但通常是Error
对象。
错误对象:JavaScript 中的错误对象包含message
、name
和stack
属性。message
是错误信息,name
是错误类型,stack
是堆栈跟踪信息。
Promise 中的错误处理:在处理异步操作时,使用Promise
的.catch
方法来捕获错误。
async/await 中的错误处理:在使用async/await
时,可以结合try...catch
来处理异步操作中的错误。
现在就来一个一个看看。
try...catch
当我们需要解析 JSON 字符串时,如果解析失败,就捕获并处理错误:
const jsonString = '{"name": "张三", "age": 30}'; try { // 尝试解析JSON字符串 const user = JSON.parse(jsonString); console.log(user.name); // 输出: 张三 } catch (error) { // 处理解析错误 console.error('解析JSON时出错:', error.message); }
如果jsonString
是一个有效的 JSON 字符串,JSON.parse
会成功解析并输出用户的名字。
如果jsonString
是无效的 JSON 字符串,JSON.parse
会抛出一个错误,catch
块会捕获这个错误并输出错误信息。
throw 语句
假设有一个函数的参数要求数字,如果不是数字,就抛出一个错误:
function divide(a, b) { if (typeof a !== 'number' || typeof b !== 'number') { throw new Error('参数必须是数字'); } if (b === 0) { throw new Error('除数不能为零'); } return a / b; } try { console.log(divide(10, 2)); // 输出: 5 console.log(divide(10, 'a')); // 抛出错误: 参数必须是数字 } catch (error) { console.error('发生错误:', error.message); }
divide
函数首先检查参数a
和b
是否为数字。
如果不是,就使用throw
语句抛出一个错误。
然后,它检查除数b
是否为零,如果是,也抛出一个错误。
在try
块中,我们调用divide
函数并捕获任何可能抛出的错误。
如果发生错误,catch
块会捕获错误并输出错误信息。
错误对象
错误对象是用于表示和处理错误的内置对象。
创建错误对象:可以使用Error
构造函数来创建一个新的错误对象。这个构造函数接受一个参数,表示错误信息。
const error = new Error('发生了错误'); console.log(error.message); // 输出: 发生了错误
错误对象的属性:错误对象包含几个重要的属性:
try { throw new Error('自定义错误信息'); } catch (error) { console.log(error.message); // 输出: 自定义错误信息 console.log(error.name); // 输出: Error console.log(error.stack); // 输出: 堆栈跟踪信息 }
message
:错误信息。
name
:错误的类型,默认是Error
。
stack
:堆栈跟踪信息,显示错误发生的位置。
自定义错误类型:可以通过继承Error
类来创建自定义的错误类型。
class ValidationError extends Error { constructor(message) { super(message); this.name = 'ValidationError'; } } try { throw new ValidationError('无效的输入'); } catch (error) { console.log(error.message); // 输出: 无效的输入 console.log(error.name); // 输出: ValidationError }
使用错误对象进行错误处理:在try...catch
语句中,可以捕获并处理错误对象。
function divide(a, b) { if (typeof a !== 'number' || typeof b !== 'number') { throw new Error('参数必须是数字'); } if (b === 0) { throw new Error('除数不能为零'); } return a / b; } try { console.log(divide(10, 2)); // 输出: 5 console.log(divide(10, 'a')); // 抛出错误: 参数必须是数字 } catch (error) { console.error('发生错误:', error.message); }
Promise 中的错误处理
前面说过,Promise 是处理异步操作的一种方式,而错误处理是确保代码健壮性的重要部分。
当一个 Promise 被拒绝(rejected)时,控制权会移交到最近的拒绝处理程序(rejection handler)。
这在实际开发中非常方便。
例如,下面的代码中,fetch 的 URL 是错误的(没有这个网站),.catch
对这个错误进行了处理:
fetch('https://no-such-server.blabla') .then((response) => response.json()) .catch((err) => alert(err));
正如你所看到的,.catch
不必是立即的。
它可以在一个或多个.then
之后出现。
或者,可能该网站一切正常,但响应不是有效的 JSON。
捕获所有错误的最简单的方法是,将.catch
附加到链的末尾:
fetch('/article/promise-chaining/user.json') .then(response => response.json()) .then(user => fetch(`https://api.github.com/users/${user.name}`)) .then(response => response.json()) .then(githubUser => new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); setTimeout(() => { img.remove(); resolve(githubUser); }, 3000);
async/await 中的错误处理
async/await
里的错误处理非常直观,可以使用传统的try/catch
语句来捕获异常。
使用try/catch
语句:在async
函数中,可以使用try/catch
语句来捕获和处理错误。try
块包含可能会抛出错误的代码,而catch
块则处理这些错误。
async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error('获取数据时出错:', error); } } fetchData();
处理多个异步操作中的错误:如果有多个异步操作,可以在每个操作中使用try/catch
,或者在一个大的try/catch
块中处理所有操作。
async function fetchMultipleData() { try { let response1 = await fetch('https://api.example.com/data1'); let data1 = await response1.json(); let response2 = await fetch('https://api.example.com/data2'); let data2 = await response2.json(); console.log(data1, data2); } catch (error) { console.error('获取数据时出错:', error); } } fetchMultipleData();
使用.catch
方法:除了try/catch
,还可以在调用async
函数时使用.catch
方法来处理错误。
async function fetchData() { let response = await fetch('https://api.example.com/data'); let data = await response.json(); return data; } fetchData() .then((data) => { console.log(data); }) .catch((error) => { console.error('获取数据时出错:', error); });
总结
🍑 try...catch 语句是 JavaScript 中最常用的错误处理方式。
🍑 使用throw
语句手动抛出错误,抛出的错误可以是任何类型,但通常是Error
对象。
🍑 JavaScript 中的错误对象包含message
、name
和stack
属性。
该文章在 2024/10/28 16:09:34 编辑过