HOW - Axios 拦截器特性

Axios 介绍

Axios 是基于 XMLHttpRequest（XHR） 和 Promise 进行封装的 HTTP 客户端。
它的核心实现依赖于以下技能：

• XMLHttpRequest（XHR）
  
  
  
  • 在浏览器环境下，Axios 使用 XMLHttpRequest 发送 HTTP 哀求，并基于它进行封装，提供更简洁的 API 和更好的错误处理机制。
    
  • 例如，它支持哀求和相应的拦截器、超时设置、哀求取消等功能，而这些都需要额外的封装才能在 XMLHttpRequest 中实现。
    
  
  
• Node.js 的 http 模块
  
  
  
  • 在 Node.js 环境下，Axios 使用 http 或 https 模块代替 XMLHttpRequest 发送 HTTP 哀求，从而实现跨环境的兼容性。
    
  
  
• Promise
  
  
  
  • Axios 的 API 是基于 Promise 设计的，全部哀求都会返回一个 Promise，支持 async/await，比传统的 XMLHttpRequest 更加方便。
    
  
  
• 拦截器（Interceptors）
  
  
  
  • 通过 request 和 response 拦截器，Axios 允许在哀求或相应到达应用程序之前，对其进行修改，好比添加哀求头、处理错误、全局 loading 等。
    
  
  
• 取消哀求（Cancel Token）
  
  
  
  • 依赖 AbortController 或者 CancelToken（Axios 0.x 版本提供），可以在特定条件下取消未完成的 HTTP 哀求。
    
  
  
• 自动 JSON 剖析
  
  
  
  • Axios 默认会将 JSON 相应数据自动剖析成 JavaScript 对象，而 XMLHttpRequest 需要手动剖析。
    
  
  
• 并发哀求管理
  
  
  
  • 通过 axios.all() 和 axios.spread()，支持并行发送多个哀求，并在全部哀求完成后进行处理。
    
  
  

总结来说，Axios 的底层实现主要基于 XMLHttpRequest（浏览器端）或 Node.js http 模块（服务端），同时联合 Promise、拦截器、取消哀求等高级特性，提供了比原生 API 更易用的 HTTP 哀求功能。
拦截器特性

Axios 拦截器（Interceptors）可以在哀求发送前或相应返回后进行处理，常用于全局哀求配置、错误处理、权限校验、自动重试等场景。以下是几个实际应用示例：
1. 同一添加 Token（哀求拦截器）

场景：
需要在全部哀求的 headers 中添加 Authorization 头部，例如 JWT Token。

1. import axios from "axios";
3. // 创建 axios 实例
4. const api = axios.create({
5.   baseURL: "https://api.example.com",
6.   timeout: 5000,
7. });
9. // 请求拦截器
10. api.interceptors.request.use(
11.   config => {
12.     const token = localStorage.getItem("token"); // 从本地存储获取 token
13.     if (token) {
14.       config.headers.Authorization = `Bearer ${token}`; // 设置 Authorization 头部
15.     }
16.     return config;
17.   },
18.   error => Promise.reject(error)
19. );
21. // 使用 axios 实例
22. api.get("/user/profile").then(response => console.log(response.data));

复制代码