Axios 和 Fetch 都是在 JavaScript 应用中用来发起 HTTP 请求的流行工具，但它们在功能、语法和可用性方面存在一些差异。
| 特点/功能 | Axios | Fetch |
|---|---|---|
| 基于 | Promise | Promise |
| JSON 处理 | 自动处理 JSON 数据 | 需要手动处理 JSON 数据 |
| 运行环境 | 浏览器和 Node.js | 浏览器 (原生支持) |
| 请求/响应拦截 | 支持 | 不支持 |
| 超时设置 | 支持 | 不支持（需要额外处理） |
| 错误处理 | 更详细的错误信息 | 较基本的错误处理 |
| 请求取消 | 支持 | 支持（使用 AbortController） |
| 设置 HTTP 头 | 简单易用 | 需要更多配置 |
| 发送/接收 Cookies | 默认不发送/接收，可配置 | 默认不发送/接收，可配置 |
| 安全性（CSRF/XSRF 防护） | 内置支持 | 需要手动处理 |
| 使用方式 | 需要安装库 | 浏览器原生支持，无需安装额外库 |
| 数据传输进度 | 支持 | 不支持 |
在 HTTP 请求的上下文中，请求/响应拦截器是非常强大的功能，它们允许开发者在请求发送到服务器和服务器响应返回到客户端之前，拦截并操作这些请求和响应。Axios 和 Fetch 在这方面的支持程度不同。
Axios 支持请求和响应拦截器，这使得它在处理复杂的 HTTP 通信方面非常灵活和强大。
请求拦截器：在请求被发送到服务器之前，允许你修改请求配置，如设置通用的头部、添加认证信息、日志记录或者在发送请求前执行某些动作。
示例：
1axios.interceptors.request.use(config => {
2 // 修改 config
3 config.headers['Authorization'] = 'Bearer token';
4 return config;
5 }, error => {
6 // 请求错误的处理
7 return Promise.reject(error);
8 });响应拦截器：在服务器响应到达客户端之前，允许你处理响应数据，如统一处理错误、格式化响应数据等。
示例：
1axios.interceptors.response.use(response => {
2 // 处理响应数据
3 return response;
4 }, error => {
5 // 响应错误的处理
6 return Promise.reject(error);
7 });Fetch API 并不原生支持请求和响应的拦截器。这意味着如果你需要类似的功能，你可能需要手动实现它，或者使用额外的库来提供这种功能。
fetch 之前手动修改请求参数。fetch 返回的 promise 时添加逻辑来实现类似的效果。示例（模拟响应拦截器）：
1fetch(url)
2 .then(response => {
3 // 检查并处理特定的响应状态
4 if (!response.ok) {
5 throw new Error('Response error');
6 }
7 return response.json();
8 })
9 .then(data => {
10 // 处理数据
11 })
12 .catch(error => {
13 // 错误处理
14 });Axios 的请求和响应拦截器提供了更多的灵活性和控制力，特别是在构建需要复杂 HTTP 请求处理的应用时。而 Fetch 由于缺乏这种内置支持，使用起来在某些复杂场景下可能不够方便。在选择适合的工具时，这可能是一个重要的考虑因素。