Axios拦截器与适配器使用教程

Axios作为流行的前端HTTP客户端，其拦截器与适配器是构建灵活、可维护网络层的关键。**Axios拦截器**允许开发者在请求发送前和响应返回后统一处理逻辑，例如添加token进行身份验证、全局处理loading状态、以及进行错误跳转等。**Axios适配器**则赋予开发者自定义请求实现方式的能力，常用于mock测试或替换底层HTTP库，以适应不同环境的需求。本文将详细解析Axios拦截器和适配器的使用方法，并通过实例展示如何将二者结合，提升项目架构质量，优化网络请求流程。掌握Axios拦截器与适配器，让你的项目网络层更加健壮、高效。

Axios的拦截器可在请求和响应前后统一处理逻辑，如添加token、处理loading、错误跳转；2. 适配器可自定义请求实现方式，用于mock测试或替换底层HTTP库；3. 二者结合能构建灵活、可维护的网络层，提升项目架构质量。

在现代前端开发中，网络请求是应用与后端通信的核心环节。Axios 作为一个流行的 Promise 基于的 HTTP 客户端，提供了简洁的 API 和强大的功能，其中 拦截器（Interceptors） 和 适配器（Adapters） 是其灵活性和可扩展性的关键所在。合理使用它们，可以统一处理请求响应逻辑、增强错误处理、甚至替换底层请求机制。

拦截器：在请求和响应前后插入逻辑

拦截器允许你在请求发送前或响应返回后，对数据进行处理或添加额外逻辑，而无需在每个请求中重复代码。

常见的使用场景包括：

• 在请求头中自动添加认证 token
• 统一处理响应数据格式（如只取 data 字段）
• 全局错误处理，比如 401 跳转登录页
• 显示加载状态（请求开始时显示 loading，响应后关闭）

注册拦截器非常简单：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  // 显示 loading
  showLoading();
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 隐藏 loading
  hideLoading();
  return response.data; // 直接返回 data
}, error => {
  if (error.response?.status === 401) {
    // 未授权，跳转登录
    window.location.href = '/login';
  }
  hideLoading();
  return Promise.reject(error);
});

适配器：自定义请求的执行方式

Axios 默认使用 XMLHttpRequest（浏览器）或 http 模块（Node.js）发送请求。但通过适配器，你可以替换这个行为，控制请求如何被发送。

适配器是一个函数，接收配置对象并返回一个 Promise，resolve 一个响应对象或 reject 一个错误。

常见用途有：

• 在 Node.js 中使用更高效的 HTTP 客户端（如 node-fetch 或 got）
• 测试时使用 mock 适配器，避免真实网络请求
• 在小程序或 React Native 中适配特定的网络 API

自定义适配器示例：

const customAdapter = config => {
  return new Promise((resolve, reject) => {
    // 这里可以调用 fetch、wx.request 等
    setTimeout(() => {
      resolve({
        data: { message: 'mock data' },
        status: 200,
        statusText: 'OK',
        headers: {},
        config: config,
        request: {}
      });
    }, 500);
  });
};

// 使用自定义适配器
axios.get('/api/test', { adapter: customAdapter })
  .then(res => console.log(res));

结合使用：构建健壮的网络层

拦截器和适配器可以协同工作。例如，在开发环境中使用 mock 适配器返回假数据，同时通过拦截器记录所有请求日志；在生产环境则使用默认适配器配合鉴权拦截器。

你也可以基于环境动态切换适配器：

const apiClient = axios.create({
  baseURL: '/api'
});

if (process.env.NODE_ENV === 'test') {
  apiClient.defaults.adapter = mockAdapter;
}

这样既保证了测试的稳定性，又不影响生产逻辑。

基本上就这些。掌握拦截器和适配器，能让 Axios 更好地服务于你的项目架构，提升代码复用性和可维护性。不复杂但容易忽略。

今天关于《Axios拦截器与适配器使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！