JavaScript网络请求_Axios拦截器与适配器原理-js教程-PHP中文网

JavaScript网络请求_Axios拦截器与适配器原理

betcha

发布： 2025-11-30 18:28:02

原创

168人浏览过

Axios通过拦截器和适配器实现请求的灵活处理与跨平台支持。拦截器基于Promise链式调用，按顺序执行请求/响应的预处理；适配器根据环境自动选择底层HTTP实现，如浏览器的XMLHttpRequest或Node.js的http模块，二者协同完成网络请求的统一管理与定制化扩展。

javascript网络请求_axios拦截器与适配器原理

在现代前端开发中，网络请求是与后端交互的核心环节。Axios 作为一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和强大的功能（如拦截器、请求/响应转换、错误处理等）被广泛使用。本文将深入解析 Axios 中两个关键机制：拦截器和适配器的工作原理。

拦截器（Interceptors）原理

Axios 的拦截器允许你在请求发送前或响应返回后，对请求配置或响应数据进行统一处理。比如添加认证头、日志记录、错误重试等。

拦截器的本质是一个发布-订阅模式的链式调用结构。Axios 内部维护了两个数组：

请求拦截器队列：用于处理 request config
响应拦截器队列：用于处理 response 或 error

当你通过 axios.interceptors.request.use() 或 axios.interceptors.response.use() 添加拦截器时，这些函数会被推入对应队列。

立即学习“Java免费学习笔记（深入）”；

当发起一个请求时，Axios 构建了一个“执行链”：

[请求拦截器... → 适配器 → 响应拦截器...]

这个链通过 Promise 链式调用串联起来。例如：

promise = Promise.resolve(config)
promise = promise.then(requestInterceptor1)
promise = promise.then(requestInterceptor2)
promise = promise.then(dispatchRequest) // 实际发送请求
promise = promise.then(responseInterceptor1)
promise = promise.then(responseInterceptor2)

登录后复制

这样设计的好处是：

可以异步处理请求/响应（拦截器可返回 Promise）
支持多个拦截器按顺序执行
异常能被后续的 catch 捕获并传递给响应拦截器的 error 分支

适配器（Adapter）原理

适配器是 Axios 实现跨平台请求的核心。它屏蔽了不同环境下的底层请求实现差异，比如浏览器中使用 XMLHttpRequest，Node.js 中使用 http 模块。

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

查看详情

Axios 在初始化时会根据运行环境自动选择合适的适配器：

浏览器环境 → 使用 XMLHttpRequest 或 fetch
Node.js 环境 → 使用内置的 http 和 https 模块

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

你可以自定义适配器，比如用于测试时模拟响应：

axios.get('/user', {
  adapter: function (config) {
    return new Promise((resolve) => {
      resolve({
        data: { id: 1, name: 'Mock User' },
        status: 200,
        statusText: 'OK',
        headers: {},
        config: config,
        request: config
      });
    });
  }
});

登录后复制

这种设计体现了“依赖倒置”原则：高层模块（Axios 核心）不依赖具体实现，而是通过适配器接口与底层通信。