Axios的Q&A

打印 上一主题 下一主题

主题 968|帖子 968|积分 2904

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企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

没腿的鸟

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表