Axios的Q&A

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 的区别

10. Axios 的请求流程原理

1. 调用 axios(config) 或 axios.get() 等方法。
2. 实际执行 Axios.prototype.request 方法。
3. 合并默认配置与用户配置。
4. 拦截器链：依次执行请求拦截器 → 发送请求（适配器） → 响应拦截器。
5. 返回 Promise 对象，处理最终结果或错误。

以上信息覆盖了 Axios 的核心概念、配置、原理及实际应用场景。如需进一步了解细节，请自行参考相关技术文档或源码分析。