Axios的QA

Axios的Q&A

以下是 Axios 的必考经典面试题及对应答案，综合了高频考点和实际应用场景：

1. Axios 的核心特点是什么？

基于 Promise 的 HTTP 库：支持所有 Promise API，简化异步请求处理。
拦截请求和响应：可通过拦截器全局处理请求前的配置（如添加 Token）和响应后的逻辑（如错误处理）。
自动转换数据：自动将响应数据转为 JSON 格式，支持请求数据的转换（如 transformRequest）。
跨环境兼容：在浏览器中使用 XMLHttpRequest，在 Node.js 中使用 http 模块，基于适配器模式实现环境判断。
防御 XSRF：通过配置 xsrfCookieName 和 xsrfHeaderName 防御跨站请求伪造攻击。
取消请求：支持通过 AbortController 或 CancelToken（旧版）取消请求。

2. Axios 的常用请求方法有哪些？

GET：axios.get(url, config)，用于获取数据。
POST：axios.post(url, data, config)，用于提交数据。
PUT：axios.put(url, data, config)，用于更新资源。
DELETE：axios.delete(url, config)，用于删除资源。
并发请求：通过 axios.all([requests]) 结合 axios.spread() 处理多个并发请求，底层基于 Promise.all 实现。

3. Axios 的核心配置属性有哪些？

基础配置：
- url：请求地址。
- method：请求方法（默认 GET）。
- baseURL：基准 URL，自动拼接在相对路径前。
数据处理：
- params：URL 参数（适用于 GET）。
- data：请求体数据（适用于 POST/PUT）。
- transformRequest：修改请求数据（仅限 POST/PUT/PATCH）。
- transformResponse：修改响应数据。
安全与网络：
- headers：自定义请求头。
- auth：HTTP 基础认证（设置 Authorization 头）。
- proxy：配置代理服务器。
- timeout：请求超时时间（单位：毫秒）。

4. 如何实现请求拦截与响应拦截？

请求拦截器：用于在请求发送前统一处理配置（如添加 Token）。

axios.interceptors.request.use(
  config => {
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => Promise.reject(error)
);

响应拦截器：用于处理响应数据或统一错误处理。

axios.interceptors.response.use(
  response => response.data, // 直接返回响应数据
  error => {
    if (error.response.status === 401) {
      // 跳转登录页
    }
    return Promise.reject(error);
  }
);

5. 如何取消 Axios 请求？

使用 AbortController（推荐）：

const controller = new AbortController();
axios.get('/api/data', { signal: controller.signal });
controller.abort(); // 取消请求

旧版 CancelToken（已弃用）：

const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token });
source.cancel('请求取消');

6. Axios 如何适配浏览器和 Node.js 环境？

适配器模式：通过判断全局变量 XMLHttpRequest（浏览器）或 process（Node.js）自动切换请求适配器。

源码实现：

function getDefaultAdapter() {
  if (typeof XMLHttpRequest !== 'undefined') return require('./adapters/xhr');
  if (typeof process !== 'undefined') return require('./adapters/http');
}

7. 如何处理 Axios 请求失败重试？

通过响应拦截器实现：

const instance = axios.create({ retry: 3, retryDelay: 1000 });
instance.interceptors.response.use(null, (error) => {
  const config = error.config;
  if (!config.retry) return Promise.reject(error);
  config.__retryCount = config.__retryCount || 0;
  if (config.__retryCount >= config.retry) return Promise.reject(error);
  
  config.__retryCount++;
  return new Promise(resolve => 
    setTimeout(() => resolve(instance(config)), config.retryDelay)
  );
});

8. Axios 二次封装的常见配置

基础配置：设置 baseURL、timeout、headers。
拦截器增强：统一处理 Token、错误码、请求重试。

多环境支持：

多个 baseURL：通过创建不同实例或动态修改请求拦截器中的 config.baseURL。

示例：

const api1 = axios.create({ baseURL: 'https://api1.com' });
const api2 = axios.create({ baseURL: 'https://api2.com' });

9. Axios 与原生 Ajax 的区别

特性	Axios	原生 Ajax
封装方式	基于 Promise，链式调用	基于回调函数，代码冗余
跨域支持	自动处理 CORS，支持 XSRF 防御	需手动设置 `withCredentials`
数据转换	自动转换 JSON 数据	需手动解析 `responseText`
拦截器	支持全局请求/响应拦截	无
环境兼容	支持浏览器和 Node.js	仅浏览器环境