前后端交互是前端面试中的高频模块，尤其在你写过实际项目、做过联调、接过接口的情况下，面试官通常会继续追问你是否真的理解接口设计、数据通信流程、安全机制和优化手段。

一、HTTP 请求流程与数据交互基础

1. 前端是如何发起请求的？

常见方式有：

  • fetch
  • axios
  • XMLHttpRequest

常见请求方法有：

  • GET
  • POST
  • PUT
  • DELETE

这些方法通常对应 RESTful API 的资源操作语义。

请求携带数据的方式也常被问到：

  • GET：参数通常拼接在 URL 上，以 query 参数形式传递。
  • POST：参数通常放在请求体中，例如 JSON、FormData。

2. 请求发出后发生了什么？

一个完整流程可以这样理解：

  1. 浏览器先封装请求。
  2. 进行 DNS 解析，找到目标服务器 IP。
  3. 建立 TCP 连接，经历三次握手。
  4. 浏览器发送 HTTP 请求报文。
  5. 服务端处理请求并返回响应，包括状态码、响应头、响应体。
  6. 前端解析响应数据，更新页面或更新状态。

这部分很适合回答“从输入 URL 到页面显示发生了什么”的延伸问题。

二、接口设计与数据约定

1. RESTful API 设计约定

面试中常见的回答点有：

  • 资源定位要清晰，例如：GET /users/1/posts
  • 动作尽量语义化，用 HTTP 方法表达操作意图
  • 返回结构尽量统一，便于前端做通用处理

例如一个常见的响应结构：

1
2
3
4
5
6
7
8
9
10
{
  "code": 200,
  "message": "OK",
  "data": {
    "user": {
      "id": 1,
      "name": "Tom"
    }
  }
}

2. 接口文档如何维护？

常见工具有：

  • OpenAPI / Swagger
  • YAPI
  • Postman
  • Apifox

面试中可以强调：

  • 前后端在开发前要统一字段定义
  • 状态码和错误码要提前约定
  • 接口文档需要随着迭代同步更新

三、前端请求封装与通用逻辑处理

1. axios 二次封装

很多面试官会问：“你们项目里请求是怎么封装的？”

常见回答点：

  • 通过请求拦截器统一注入 token
  • 可以附带 traceId 或请求标识，方便排查问题
  • 通过响应拦截器统一处理登录过期、错误提示、业务异常
  • 封装通用请求方法，例如 GET、POST、上传、下载

如果你做过工程化一些的项目，这一段基本是必问。

2. 异常处理策略

需要区分两类错误：

  • 业务错误：接口请求成功，但业务状态失败，例如参数不合法、权限不足
  • 系统错误：如 404、500、超时、网络中断

常见处理方式有：

  • toast 提示
  • modal 弹窗
  • 跳转错误页
  • 登录失效后跳转登录页

面试中可以补一句：错误展示要分层，不要所有异常都只弹一个“请求失败”。

四、与后端协作流程

这一块是实际项目面试里非常常见的问题。

面试官可能会问：

你们前后端联调是怎么配合的？如果接口字段变了怎么办？

推荐回答逻辑：

  1. 开发前进行接口评审，使用接口文档工具确认字段定义。
  2. 前端可以先用 mock 数据开发，提高并行效率。
  3. 本地调试阶段使用 Postman、Swagger 或 Apifox 验证接口。
  4. 联调阶段通过环境变量切换不同环境的 API 域名。
  5. 接口变更时做好版本控制和兼容处理，例如给字段加默认值，避免旧页面直接崩掉。

这里可以补一个你自己的项目例子，效果会更好。

五、跨域与安全问题

1. 为什么会跨域？怎么解决？

跨域本质上是浏览器的同源策略限制。

常见解决方式：

  • CORS：后端设置 Access-Control-Allow-Origin
  • 反向代理：例如前端开发环境配置 proxy
  • JSONP：只适用于 GET，现在了解即可

2. 前后端通信中有哪些安全风险？

常见风险：

  • XSS
  • CSRF
  • token 泄露或被劫持

常见回答点：

  • 对用户输入或富文本渲染内容做安全处理，必要时使用 DOMPurify
  • 通过 token 校验、SameSite Cookie 等手段降低 CSRF 风险
  • 更安全的 token 存储方式通常是 HttpOnly Cookie，避免被前端 JavaScript 直接读取

六、性能优化角度的交互设计

1. 如何减少接口请求数量？

常见思路：

  • 接口聚合，例如 GraphQL 或 BFF
  • 使用缓存策略，如本地缓存、Service Worker 缓存、CDN 缓存
  • 在搜索、输入联想等场景使用防抖和节流

2. 前端如何处理大数据接口？

常见方案：

  • 分页加载
  • 无限滚动
  • 并发请求后做结果合并
  • 使用虚拟列表减少 DOM 渲染压力，例如 react-window

这类问题的重点不是只说“做分页”，而是说清楚为什么这么做：减少首屏压力、降低接口响应负担、优化用户感知性能。

七、常见面试高频问题总结

问题 参考答题要点
你如何封装请求逻辑？ axios 封装、拦截器、统一错误处理、token 注入
如何处理接口报错？ 区分业务错误和网络错误，结合 toast、弹窗、错误边界处理
说说跨域和解决方案？ 同源策略、CORS、proxy、JSONP（了解）
如何设计前端与后端的协作流程？ 接口文档、mock、联调、兼容、版本控制
你有没有做过前端缓存？ localStorage、sessionStorage、IndexedDB、Service Worker、接口缓存

总结

前后端交互不只是“会调接口”，还包括：

  • 对网络请求机制的理解
  • 在工程架构里做好请求封装与拦截
  • 与后端协作时能把控接口评审、mock、联调和兼容处理
  • 从安全、性能、可维护性的角度设计交互方案

准备面试时，建议不要只背概念，而是尽量结合自己的项目经验去回答。
比如可以说清楚：“我在某个项目里是怎么封装请求层的、怎么处理 token、怎么和后端联调、怎么处理接口变更的。”

这样的回答会比纯八股更有说服力。