前端如何查看接口调用、传参及返回结果

作为一名后端工程师，理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具（F12）查看和分析这些信息，并附带图片案例帮助你更好地理解。

1. 打开浏览器开发者工具

按下 F12 或右键点击页面选择'检查'可以打开浏览器的开发者工具。常用的浏览器如 Chrome、Firefox 等都内置了开发者工具。以下演示以某页面为例，打开开发者工具进行展示。

2. 使用 Network 面板

在开发者工具中，Network 面板用于监控和分析所有网络请求。以下是 Network 面板中的几个重要选项及其含义：

• Name：显示请求的资源名称或 API 路径。
• Status：HTTP 状态码，表示请求的结果：
  • 200 OK：成功响应。
  • 400 Bad Request：客户端请求有误。
  • 401 Unauthorized：未授权。
  • 403 Forbidden：禁止访问。
  • 404 Not Found：资源未找到。
  • 500 Internal Server Error：服务器内部错误。
• Type：资源类型，例如：
  • xhr（XMLHttpRequest）
  • fetch（现代的 API 请求方式）
  • script（JavaScript 文件）
  • css（样式表）
  • img（图片）
• Initiator：发起请求的源头，可能是 JavaScript 代码、HTML 标签或其他资源。
• Size：请求和响应的大小，包括头部和主体。
• Time：请求的耗时，从发起请求到接收到完整响应的时间。
• Waterfall：以瀑布图的形式展示每个请求的时间线，帮助你了解请求的顺序和延迟情况。

3. 查看具体的 API 请求

当你想查看某个具体的 API 请求时，可以在 Network 面板中找到对应的请求行，然后点击它展开详细信息。例如查看某页面的 API 请求，以下是一些关键部分：

a. Headers

包含请求头和响应头信息，如：

• Content-Type：指定请求或响应的内容类型（如 application/json）。
• Authorization：用于身份验证的令牌或凭据。
• Cookie：存储在客户端的会话信息。
• User-Agent：标识发送请求的浏览器或客户端。

b. Payload

显示请求体的内容，即前端传递给后端的参数。对于不同类型的请求，Payload 内容有所不同：

• POST/PUT 请求：通常为 JSON 格式的数据，例如：

{
  "username": "example",
  "password": "secret"
}

• GET 请求：参数通常作为 URL 查询字符串的一部分，例如：

/api/users?name=John&age=30

c. Response

下面是与之相对应的前端展示：

显示后端返回的数据，通常为 JSON 格式。例如：

{
  "id": 1,
  "name": "John Doe",
  "email": "[email protected]"
}

d. Preview

以更友好的格式展示返回数据，便于阅读。对于复杂的嵌套结构，Preview 会自动格式化并提供折叠功能。

e. Timing

展示请求各个阶段的时间消耗，帮助优化性能。具体分为以下几个阶段：

• Queueing：请求排队等待的时间。
• Stalled：请求被阻塞的时间。
• DNS Lookup：解析域名的时间。
• Initial Connection：建立 TCP 连接的时间。
• SSL：SSL/TLS 握手的时间。
• Request Sent：发送请求的时间。
• Waiting (TTFB)：等待第一个字节响应的时间。
• Content Download：下载响应内容的时间。

4. 实际操作步骤

假设你有一个前端页面调用了后端 API 来获取用户信息，你可以按照以下步骤进行查看：

1. 打开浏览器开发者工具（F12），切换到 Network 标签页。
2. 刷新页面或触发相关操作（如点击按钮），确保 API 请求被发送。
3. 在 Network 列表中找到对应的 API 请求（例如 /api/user）。
4. 点击该请求行，查看详细的请求和响应信息，包括：
   • 请求方法（GET/POST 等）
   • 请求参数（Payload）
   • 返回结果（Response）

5. 常见问题及解决方法

a. 无法看到 API 请求

• 原因：可能你在触发请求之前没有打开开发者工具，或者过滤器设置不当。
• 解决方法：确保在触发请求之前已经打开了开发者工具，并且没有过滤掉 API 请求（可以通过输入框顶部的过滤器调整）。

b. 请求失败

• 原因：可能是客户端请求有误或服务器端出现问题。
• 解决方法：检查 Status 列是否显示了非 2xx 的状态码，查看 Response 中是否有错误信息。常见的错误包括：
  • 400 Bad Request：检查请求参数是否正确。
  • 401 Unauthorized：确认身份验证信息是否有效。
  • 500 Internal Server Error：查看服务器日志以排查问题。

c. 跨域问题（CORS）

• 原因：浏览器出于安全考虑，默认不允许跨域请求。
• 解决方法：检查后端是否正确配置了 CORS 策略。确保响应头中包含以下字段：
  • Access-Control-Allow-Origin：允许的源地址。
  • Access-Control-Allow-Methods：允许的 HTTP 方法。
  • Access-Control-Allow-Headers：允许的请求头。