Axios拦截器React JS

在本文中，我们将讨论如何在 React 中使用 Axios 创建安全高效的 API 客户端。我们将使用 APIClient 类介绍 Axios 设置、拦截器、错误处理配置和 CRUD 方法。让我们分解一下这个脚本的工作原理以及它提供的功能。

1。 Axios 基本配置

这个初始 Axios 设置定义了 baseURL 并为所有 POST 请求设置了 Content-Type。通过配置基本 URL，Axios 会自动将此基本 URL 附加到每个请求，从而更轻松地在 API 调用中使用端点。

2。使用拦截器进行响应和错误处理

拦截器是强大的工具，使我们能够全局处理响应和错误。

处理响应

此响应拦截器检查响应中是否有数据。如果存在，则仅返回数据。这样，我们只在组件中获取我们需要的相关数据，而无需重复访问response.data。

处理错误

在本节中，如果响应状态为 401 并且令牌无效，应用程序会从安全本地存储中清除令牌并将用户重定向到登录页面。这可确保用户在身份验证会话过期时自动注销。对于其他状态代码，它会捕获错误并根据错误类型返回适当的消息。

3。 setAuthorization函数

此函数允许应用程序动态地为每个请求添加身份验证令牌。登录后调用setAuthorization(token)，token会自动添加到请求头中。

4。为 CRUD 方法创建 APIClient 类
APIClient 类提供了 HTTP 请求的标准方法，包括 get、create、update、put 和 delete。

获取方法
此方法很灵活，可以处理对象或字符串格式的参数。

此方法会自动格式化查询字符串，从而更轻松地创建具有复杂参数（如分页、过滤器或排序）的 GET 请求。

创建、更新、放置和删除方法
这些方法使用Axios内置的post、patch、put和delete函数与API交互。

该类抽象了API调用，使得组件中的代码更加干净、结构化，减少了冗余。

API 客户端使用示例

对于完整的脚本，您可以查看以下要点
Axios 拦截器

以上是Axios拦截器React JS的详细内容。更多信息请关注PHP中文网其他相关文章！