我要招人

前端/移动开发面试题更新 2026-08-05

请说明在 Vue 项目中发起网络请求的常见方式和选择依据，并比较 ajax、fetch、axios 三者的核心区别。

前端/移动开发技术原理技术选型Vue

考察说明

考察候选人对 Vue 项目中 HTTP 请求方案的理解，以及对 ajax、fetch、axios 三种技术差异和适用场景的掌握。

回答思路

  1. 【回答框架 1】在 Vue 项目中发送请求有多种方式，常见的是使用 axios 库，也可以使用原生 fetch 或 XMLHttpRequest（即 ajax 的核心）。axios 基于 Promise，支持请求和响应拦截、取消请求、自动转换 JSON 数据、客户端防 CSRF 等功能，因此成为 Vue 项目中的主流选择，尤其是在 Vue 2 和 Vue 3 中都可以直接使用。
  2. 【回答框架 2】ajax 是异步 JavaScript 和 XML 的简称，通常指基于 XMLHttpRequest 的技术，通过回调函数处理异步响应。axios 本质是对 XMLHttpRequest 的封装，提供了更简洁的 API 和更强大的功能，但底层依然依赖浏览器环境。在 Node.js 环境中，axios 使用 http 模块，实现前后端同构。
  3. 【回答框架 3】fetch 是浏览器原生提供的 API，基于 Promise，语法简洁，支持流式响应，但存在一些缺点：默认不带 cookie（需要设置 credentials），请求超时和取消需要借助 AbortController，且响应需要手动调用 json() 等方法解析。axios 在这些方面处理得更好，例如默认自动解析 JSON，提供超时配置和取消机制。
  4. 【回答框架 4】在 Vue 项目中，选择请求库时需要考虑项目需求。如果项目需要兼容旧浏览器、需要拦截器、需要统一错误处理，axios 更合适；如果追求轻量和原生支持，fetch 也可用，但需要额外封装处理超时和 cookie 等。此外，在 Vue 应用中，通常会在封装请求模块时统一配置 baseURL、请求头、错误码处理等，以提高可维护性。
  5. 【关键点 1】axios 是基于 Promise 的 HTTP 客户端，封装了 XMLHttpRequest，提供拦截器、取消、超时等功能。
  6. 【关键点 2】fetch 是原生 API，基于 Promise，但不支持拦截器和超时（需 AbortController）。
  7. 【关键点 3】ajax 通常指 XMLHttpRequest，基于回调函数，代码较繁琐。
  8. 【关键点 4】在 Vue 项目中推荐使用 axios，因其功能全面且易于封装和统一管理请求。
  9. 【关键点 5】选择请求方案需考虑浏览器兼容性、功能需求和项目维护成本。
  10. 【易错点 1】仅依赖 fetch 而忽略错误处理（如非 2xx 状态）容易导致问题。
  11. 【易错点 2】使用 fetch 时忘记配置 credentials 会导致跨域请求不带 cookie。