为什么不要重复封装 Axios 和 Interceptors？

前端

2023-10-30 08:07:37

最近，我注意到许多开发者都在重复封装 Axios 和 Interceptors。他们认为这可以简化代码并使其更易于维护。然而，我认为这是错误的。

Axios 本身已经非常简单易用了。它提供了许多开箱即用的特性，例如：

支持各种 HTTP 请求方法
自动处理 JSON 数据
支持超时和重试
支持自定义头部和查询参数

因此，您通常不需要封装 Axios 来实现这些功能。

此外，Axios 还提供了拦截器和适配器，使您可以轻松地扩展其功能。拦截器允许您在请求和响应被发送之前或之后执行一些操作。适配器允许您将 Axios 与其他库或框架集成。

因此，您通常也不需要封装 Axios 来实现这些功能。

重复封装 Axios 可能导致以下问题：

代码维护困难：当您封装 Axios 时，您需要维护两个代码库：Axios 本身和您的封装库。这可能会导致代码冗余和冲突。
开发成本增加：封装 Axios 需要您花费时间和精力来开发和维护封装库。这可能会增加开发成本。
理解成本增加：封装 Axios 可能使您的代码更难理解。这可能会增加其他开发人员理解和维护您的代码的成本。

因此，我建议您不要重复封装 Axios 和 Interceptors。如果您需要扩展 Axios 的功能，请使用拦截器和适配器。

如果您正在寻找一个用于封装 Axios 的库，我推荐您使用 Axios-Hooks。这个库提供了许多有用的挂钩，可以帮助您轻松地扩展 Axios 的功能。

代码示例

以下是如何使用 Axios-Hooks 来扩展 Axios 的功能：

import axios from "axios";
import { useAxios } from "axios-hooks";

const apiClient = axios.create({
  baseURL: "https://example.com/api",
});

const useGetUsers = () => {
  const [data, error, loading] = useAxios(apiClient.get("/users"));

  return { data, error, loading };
};

export default useGetUsers;