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）。
  1. axios.interceptors.request.use(
  2.   config => {
  3.     config.headers.Authorization = 'Bearer token';
  4.     return config;
  5.   },
  6.   error => Promise.reject(error)
  7. );

  复制代码
• 响应拦截器：用于处理响应数据或同一错误处理。
  1. axios.interceptors.response.use(
  2.   response => response.data, // 直接返回响应数据
  3.   error => {
  4.     if (error.response.status === 401) {
  5.       // 跳转登录页
  6.     }
  7.     return Promise.reject(error);
  8.   }
  9. );

  复制代码

---

5. 怎样取消 Axios 哀求？

• 使用 AbortController（推荐）：
  1. const controller = new AbortController();
  2. axios.get('/api/data', { signal: controller.signal });
  3. controller.abort(); // 取消请求

  复制代码
• 旧版 CancelToken（已弃用）：
  1. const source = axios.CancelToken.source();
  2. axios.get('/api/data', { cancelToken: source.token });
  3. source.cancel('请求取消');

  复制代码

---

6. Axios 怎样适配浏览器和 Node.js 情况？

• 适配器模式：通过判断全局变量 XMLHttpRequest（浏览器）或 process（Node.js）自动切换哀求适配器。
  
• 源码实现：
  1. function getDefaultAdapter() {
  2.   if (typeof XMLHttpRequest !== 'undefined') return require('./adapters/xhr');
  3.   if (typeof process !== 'undefined') return require('./adapters/http');
  4. }

  复制代码

---

7. 怎样处理 Axios 哀求失败重试？

通过响应拦截器实现：

1. const instance = axios.create({ retry: 3, retryDelay: 1000 });
2. instance.interceptors.response.use(null, (error) => {
3.   const config = error.config;
4.   if (!config.retry) return Promise.reject(error);
5.   config.__retryCount = config.__retryCount || 0;
6.   if (config.__retryCount >= config.retry) return Promise.reject(error);
7.   
8.   config.__retryCount++;
9.   return new Promise(resolve =>
10.     setTimeout(() => resolve(instance(config)), config.retryDelay)
11.   );
12. });

复制代码

---

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

• 根本配置：设置 baseURL、timeout、headers。
  
• 拦截器增强：同一处理 Token、错误码、哀求重试。
  
• 多情况支持：
  
  
  
  • 多个 baseURL：通过创建不同实例或动态修改哀求拦截器中的 config.baseURL。
    
  • 示例：
    1. const api1 = axios.create({ baseURL: 'https://api1.com' });
    2. const api2 = axios.create({ baseURL: 'https://api2.com' });

    复制代码
  
  

---

9. Axios 与原生 Ajax 的区别

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

---

10. Axios 的哀求流程原理

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

---

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。