在任何一门语言中，都需要错误处理部分。

因为它是确保代码健壮性和用户体验的重要部分。

JavaScript 的错误处理主要包括以下几个：

1. try...catch 语句：这是最常用的错误处理方式。try块包含可能会抛出错误的代码，而catch块则处理这些错误。finally块中的代码无论是否发生错误都会执行，通常用于清理资源或执行收尾工作。

2. throw 语句：可以使用throw语句手动抛出错误。抛出的错误可以是任何类型，但通常是Error对象。

3. 错误对象：JavaScript 中的错误对象包含message、name和stack属性。message是错误信息，name是错误类型，stack是堆栈跟踪信息。

4. Promise 中的错误处理：在处理异步操作时，使用Promise的.catch方法来捕获错误。

5. 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块会捕获错误并输出错误信息。

错误对象

错误对象是用于表示和处理错误的内置对象。

1. 创建错误对象：可以使用Error构造函数来创建一个新的错误对象。这个构造函数接受一个参数，表示错误信息。

   const error = new Error('发生了错误'); console.log(error.message); // 输出: 发生了错误 

2. 错误对象的属性：错误对象包含几个重要的属性：

   try {   throw new Error('自定义错误信息'); } catch (error) {   console.log(error.message); // 输出: 自定义错误信息   console.log(error.name); // 输出: Error   console.log(error.stack); // 输出: 堆栈跟踪信息 } 

• message：错误信息。

• name：错误的类型，默认是Error。

• stack：堆栈跟踪信息，显示错误发生的位置。

3. 自定义错误类型：可以通过继承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 } 

4. 使用错误对象进行错误处理：在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语句来捕获异常。

1. 使用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(); 

2. 处理多个异步操作中的错误：如果有多个异步操作，可以在每个操作中使用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(); 

3. 使用.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属性。