axios响应拦截器错误处理
在前端开发中，我们经常需要与后端进行数据交互。而为了方便地发送HTTP请求和处理响应，我们通常会使用一个库，例如axios。axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。
然而，当我们发送请求时，可能会遇到一些错误。这些错误可以是网络错误、服务器错误或者其他与后端交互相关的错误。为了提供更好的用户体验，我们通常需要对这些错误进行统一的处理和展示。
在axios中，我们可以使用拦截器来处理请求和响应。拦截器允许我们在请求或响应被发送或处理之前对其进行拦截和修改。在本文中，我们将讨论如何使用axios的响应拦截器来处理错误。
响应拦截器简介
在axios中，响应拦截器允许我们在收到响应之后对其进行处理。我们可以使用axios.interceptors来添加一个或多个响应拦截器。每个拦截器都是一个函数，它接收一个响应对象作为参数，并返回一个处理过的响应对象或一个错误。
下面是一个简单的示例，展示了如何添加一个响应拦截器：
import axios from 'axios';
// 添加响应拦截器
axios.interceptors.response.use(
response => {
// 在这里对响应进行处理
return response;
},
error => {
// 在这里对错误进行处理
return Promise.reject(error);
}
);
在上面的示例中，我们使用axios.interceptors.response.use来添加一个响应拦截器。拦截器接收两个函数作为参数，第一个函数用于处理成功的响应，第二个函数用于处理错误的响应。这两个函数分别接收一个响应对象或错误对象作为参数，并返回一个处理过的响应对象或一个错误对象。
错误处理示例
让我们来看一个更具体的例子，展示如何使用响应拦截器处理错误。假设我们正在请求一个用户的信息，并期望得到一个包含用户姓名和邮箱的响应。如果请求成功，我们要将用户信息展示在页面上；如果请求失败，我们要显示一个错误提示。
首先，我们可以定义一个函数，用于展示错误提示。这个函数可以基于具体的UI库或框架来实现。这里我们使用简单的alert函数来展示错误提示。
function showError(message) {
alert(message);
}
接下来，我们可以使用axios发送请求，并添加一个响应拦截器。在拦截器中，我们检查响应的状态码。如果状态码不是200，表示请求失败，我们将显示一个错误提示。
import axios from 'axios';
function showError(message) {
alert(message);
}
// 发送请求
axios.get('/user/info')
.then(response => {
// 请求成功，展示用户信息
const { name, email } = response.data;
console.log(`Name: ${name}, Email: ${email}`);
})
.catch(error => {
// 请求失败，显示错误提示
showError(error.message);
});
在上面的示例中，我们使用了axios的get方法发送了一个GET请求。在请求成功时，我们从响应的data属性中提取用户的姓名和邮箱，并将其打印到控制台。在请求失败时，我们从错误对象中提取错误信息，并通过showError函数展示错误提示。
统一错误处理
有时候，我们可能需要在多个地方使用到响应拦截器，以统一处理错误。为了避免重复代码，我们可以将错误处理逻辑抽象成一个公共的函数，并在响应拦截器中调用这个函数。
下面是一个示例，展示了如何在响应拦截器中调用一个公共的错误处理函数：
import axios from 'axios';
function showError(message) {
alert(message);
}
// 公共的错误处理函数
function handleErrorResponse(error) {
showError(error.message);
return Promise.reject(error);
}
// 添加
