抛弃低级 axios 封装，回归本质之路

前端

2023-12-26 06:35:57

在当今前端开发领域，Axios 已成为处理 HTTP 请求的得力助手。然而，随着技术社区不断涌现出各种 axios 封装方案，是否需要对 axios 进行封装也成为了一个值得思考的问题。

封装之弊

乍看之下，axios 封装似乎可以简化 HTTP 请求，提升开发效率。但仔细审视，这种封装往往会带来以下弊端：

增加复杂性： 过度的封装会引入额外的概念和配置项，从而增加代码复杂性。这不仅会延长学习曲线，还会给代码维护带来挑战。
限制灵活性： 封装方案往往针对特定场景进行定制，这可能会限制其在其他场景中的适用性。当遇到特殊需求时，开发者需要花费更多时间来修改或扩展封装方案，反而得不偿失。
背离 axios 本质： axios 的一大优点就是其简洁易用。封装方案可能会掩盖 axios 的这种优势，使开发者难以充分发挥其潜力。

回归本质

抛弃低级封装，回归 axios 本质才是更明智的选择。Axios 提供了一套丰富的 API，足以满足大多数 HTTP 请求需求。通过遵循以下原则，我们可以充分利用 axios 的优势：

按需定制： 只在需要时对 axios 进行轻量级定制，避免过度封装。例如，可以通过添加拦截器来实现请求日志或错误处理。
保持简明： 在定制过程中，优先考虑代码的简明性和易维护性。避免使用复杂的逻辑或额外的依赖项，让代码易于理解和修改。
善用原生 API： 充分利用 axios 原生的 API，而不是引入额外的封装层。这可以确保代码与 axios 保持同步，避免潜在的兼容性问题。

案例分析

以添加请求头为例，我们可以通过以下两种方式实现：

低级封装：

import axios from 'axios';

const instance = axios.create({
  headers: {
    'Content-Type': 'application/json',
  },
});

instance.get('/api/v1/users');

按需定制：

import axios from 'axios';

const instance = axios.create();
instance.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json';
  return config;
});

instance.get('/api/v1/users');

后者通过拦截器的方式，在请求发出前添加请求头，更加灵活和可控。同时，它保持了 axios 原生的 API，避免了额外封装带来的复杂性。