如何检测 Axios 请求中的 401 错误
如果你是一名刚入行的开发者，遇到 API 请求时返回的 401 错误（未经授权）并不稀奇。本文将带你一步步了解如何使用 Axios 处理这些情况。我们将首先概览这个过程，然后一步步深入，提供每一步所需的代码及详细说明。
处理 401 错误的流程
下面是处理 Axios 请求并检测 401 错误的步骤概览：
| 步骤 | 描述 |
|---|---|
| 步骤1 | 安装并配置 Axios。 |
| 步骤2 | 创建 Axios 实例并设置请求拦截器。 |
| 步骤3 | 创建响应拦截器以处理 401 错误。 |
| 步骤4 | 使用 Axios 发起请求并处理响应。 |
步骤详解
步骤1：安装并配置 Axios
首先，你需要在项目中安装 Axios。可以使用 npm 或 yarn 完成。
npm install axios
或使用 yarn：
yarn add axios
步骤2：创建 Axios 实例并设置请求拦截器
接下来，我们需要创建一个 Axios 实例，并添加请求拦截器。在请求拦截器中，我们可以为请求添加身份验证 token。
以下是代码示例：
import axios from 'axios';
// 创建一个 Axios 实例
const apiClient = axios.create({
baseURL: ' // API 基础 URL
timeout: 10000, // 请求超时时间（毫秒）
});
// 添加请求拦截器
apiClient.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token'); // 从 localStorage 获取 token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`; // 将 token 添加到请求头
}
return config; // 返回配置以继续
},
(error) => {
return Promise.reject(error); // 返回错误信息
}
);
代码解释：
axios.create()：创建一个新的 Axios 实例。interceptors.request.use()：添加请求拦截器以处理请求配置。
步骤3：创建响应拦截器以处理 401 错误
我们需要使用响应拦截器来处理 401 错误的情况。这通常意味着用户需要重新登录。
// 添加响应拦截器
apiClient.interceptors.response.use(
(response) => {
return response; // 返回响应
},
(error) => {
// 检查是否是 401 错误
if (error.response && error.response.status === 401) {
console.error('未授权，请登录！'); // 控制台输出未授权信息
// 在这里可以进行重定向到登录页面等操作
}
return Promise.reject(error); // 返回错误，继续处置
}
);
代码解释：
interceptors.response.use()：添加响应拦截器用于处理 API 返回的响应。error.response.status：检查错误的状态码。
步骤4：使用 Axios 发起请求并处理响应
最后，我们可以使用刚才配置的 Axios 实例来发送请求，并处理返回的结果。
// 发起请求
async function fetchData() {
try {
const response = await apiClient.get('/data'); // 发送 GET 请求
console.log('请求成功，数据：', response.data); // 处理响应数据
} catch (error) {
console.error('请求失败：', error.message); // 处理请求错误
}
}
// 调用函数
fetchData();
代码解释：
apiClient.get('/data')：使用 Axios 实例发起 GET 请求。console.log()：输出请求成功或失败的信息。
流程序列图
下面是处理流程的序列图，能够让你清晰地看到每一步的关系。
sequenceDiagram
participant User
participant App
participant API
User->>App: 发起请求
App->>API: 发送请求
API-->>App: 返回响应
App->>User: 返回数据或错误信息
结尾
通过以上步骤，你已经成功设置了 Axios 实例，并实现了拦截器来处理 401 未授权错误。这不仅能帮助你跟踪 API 请求中的认证问题，还能提升你编写和维护代码的能力。记得在真实开发中妥善处理可能的错误，以提升用户体验。
希望这篇文章能帮助你更好地理解并实现 Axios 中的 401 错误处理。如果你有任何疑问，欢迎随时提问！祝你开发顺利！
