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。
import axios from "axios";
// 创建 axios 实例
const api = axios.create({
baseURL: "https://api.example.com",
timeout: 5000,
});
// 请求拦截器
api.interceptors.request.use(
config => {
const token = localStorage.getItem("token"); // 从本地存储获取 token
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 设置 Authorization 头部
}
return config;
},
error => Promise.reject(error)
);
// 使用 axios 实例
api.get("/user/profile").then(response => console.log(response.data));
页:
[1]