axios的适配器和拦截器谁先执行

在 axios 中，适配器（adapter） 和 拦截器（interceptor） 的执行顺序是明确且固定的：

请求拦截器 → 适配器 → 响应拦截器

---

📌 详细流程如下：

1. 请求阶段（Request Phase）

• 用户调用 axios(config)
• 请求拦截器（request interceptors） 依次执行（从外到内）
  • 每个拦截器可以修改 config
• 最终进入 适配器（adapter）
  • 浏览器环境默认使用 xhr 适配器
  • Node.js 环境默认使用 http 适配器
  • 适配器负责真正发起 HTTP 请求（如调用 XMLHttpRequest 或 http.request）

2. 响应阶段（Response Phase）

• 适配器收到响应后，构造一个标准的 response 对象
• 响应拦截器（response interceptors） 依次执行（从内到外）
  • 每个拦截器可以修改 response 或抛出错误
• 最终将结果返回给用户（或进入 .catch()）

---

🧪 执行顺序图示

用户调用 axios()
       ↓
[请求拦截器 1] → [请求拦截器 2] → ... 
       ↓
     [适配器] ← 发起真实 HTTP 请求
       ↓
[响应拦截器 1] ← [响应拦截器 2] ← ...
       ↓
   返回 Promise (resolve/reject)

⚠️ 注意：

• 请求拦截器是 栈式顺序（先添加的先执行）
• 响应拦截器是 栈式逆序（后添加的先执行） —— 这是为了实现“洋葱模型”

---

✅ 示例验证

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(config => {
  console.log('请求拦截器执行');
  return config;
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应拦截器执行');
  return response;
});

// 自定义适配器（仅用于演示）
const customAdapter = config => {
  console.log('适配器执行');
  // 这里简化，实际需返回 Promise
  return Promise.resolve({ data: 'mock', status: 200, config });
};

axios.get('/test', { adapter: customAdapter });

控制台输出顺序：

请求拦截器执行
适配器执行
响应拦截器执行

---

💡 总结

组件	执行时机	能否修改数据
请求拦截器	在适配器之前	✅ 修改 config
适配器	真正发起网络请求	❌（只读输入）
响应拦截器	在适配器之后	✅ 修改 response

所以答案很明确：拦截器先于适配器执行（请求拦截器），适配器再触发响应拦截器。

如有自定义适配器、取消请求、重试逻辑等高级场景，这个顺序依然成立。