如何处理异步请求中的错误？

在处理异步请求中的错误时，需要综合考虑请求的各个阶段以及不同类型的错误

在请求发送阶段处理错误

• 网络连接错误：在创建和配置 XMLHttpRequest 对象或使用 fetch API 发送请求时，可能会出现网络连接问题，如无法连接到服务器、DNS 解析失败等。可以通过监听 XMLHttpRequest 对象的 error 事件或 fetch API 返回的 Promise 的 catch 方法来捕获这些错误。

// 使用 XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data');
xhr.onerror = function() {
   
  console.error('网络连接错误');
};
xhr.send();

// 使用 fetch API
fetch('http://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
   
    console.error('网络连接错误或请求被阻止：', error);
  });

在请求接收阶段处理错误

• 根据响应状态码处理错误：如前文所述，根据服务器返回的不同响应状态码来进行相应的错误处理。在 XMLHttpRequest 的 readystatechange 事件或 fetch API 的 then 方法中，判断响应状态码是否在预期范围内，对于不在成功范围内的状态码，进行特定的错误处理。

// 使用 XMLHttpRequest
xhr.onreadystatechange = function() {
   
  if (xhr.readyState === 4) {
   
    if (xhr.status >= 200 && xhr.status < 300) {
   
      // 请求成功，处理响应数据
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
   
      // 根据不同的状态码进行错误处理
      if (xhr.status === 400) {
   
        console.error('请求参数错误');
      } else if (xhr.status === 401) {
   
        console.error('未授权访问');
      } else if (xhr.status === 404) {
   
        console.error('请求的资源未找到');
      } else {
   
        console.error('请求失败，状态码：', xhr.status);
      }
    }
  }
};

// 使用 fetch API
fetch('http://example.com/api/data')
.then(response => {
   
    if (!response.ok) {
   
      if (response.status === 400) {
   
        console.error('请求参数错误');
      } else if (response.status === 401) {
   
        console.error('未授权访问');
      } else if (response.status === 404) {
   
        console.error('请求的资源未找到');
      } else {
   
        console.error('请求失败，状态码：', response.status);
      }
      throw new Error('请求失败');
    }
    return response.json();
  })
.then(data => console.log(data))
.catch(error => console.error('请求失败：', error));

处理异步操作中的 Promise 拒绝

• 使用 async/await 处理错误：当使用 async/await 语法来处理异步请求时，可以使用 try/catch 块来捕获异步操作中可能出现的错误，包括 fetch API 返回的 Promise 被拒绝的情况。

async function getData() {
   
  try {
   
    const response = await fetch('http://example.com/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
   
    console.error('请求失败：', error);
  }
}

getData();

全局错误处理

• 设置全局的错误处理函数：对于一些未被捕获的异步错误，可以设置全局的错误处理函数来进行统一的处理。在浏览器环境中，可以使用 window.onerror 或 window.addEventListener('error', callback) 来捕获全局的 JavaScript 错误，包括异步请求中的错误。在 Node.js 环境中，可以使用 process.on('uncaughtException', callback) 来捕获未捕获的异常。

// 浏览器环境下的全局错误处理
window.addEventListener('error', function(event) {
   
  console.error('全局错误：', event.error);
});

// Node.js 环境下的全局错误处理
process.on('uncaughtException', function(err) {
   
  console.error('未捕获的异常：', err);
});

错误信息的展示和反馈

• 向用户显示友好的错误提示：当发生错误时，除了在控制台记录错误信息外，还应向用户展示友好的错误提示，告知用户请求出现了问题以及可能的原因和解决方案。可以使用 alert() 弹出框、页面上的提示信息框或特定的错误页面来向用户展示错误信息。
• 记录错误信息用于分析：将错误信息记录到日志文件或远程的错误监控服务中，以便开发人员后续分析和排查问题。可以使用浏览器的开发者工具、日志库或专门的错误监控工具来收集和管理错误信息。

通过以上多种方法的综合运用，可以全面地处理异步请求中的各种错误，提高应用程序的稳定性和可靠性，同时为用户提供更好的错误反馈和体验。在实际开发中，应根据具体的项目需求和应用场景，选择合适的错误处理策略和方法，并进行充分的测试和优化。