ToB企服应用市场:ToB评测及商务社交产业平台

标题: 具体教程：如何从前端查看调用接口、传参及返回结果（附带图片案例） [打印本页]
作者: 罪恶克星    时间: 2025-1-24 15:16
标题: 具体教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）
目次
1. 打开欣赏器开发者工具
2. 利用 Network 面板
3. 查看具体的API请求
a. Headers​
b. Payload​
c. Response​
d. Preview
e. Timing​
4. 实际操纵步骤
5. 常见题目及办理方法
a. 无法看到API请求
b. 请求失败
c. 跨域题目（CORS）
作为一名后端工程师，理解前端如何调用接口、转达参数以及接收返回值是非常告急的。下面将具体先容如何通过欣赏器开发者工具（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格式的数据，例如：
  1.   {
  2.     "username": "example",
  3.     "password": "secret"
  4.   }
复制代码
GET 请求：参数通常作为URL查询字符串的一部分，例如：
  1.   /api/users?name=John&age=30
复制代码
c. Response


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

表现后端返回的数据，通常为JSON格式。例如：
  1. {
  2.   "id": 1,
  3.   "name": "John Doe",
  4.   "email": "john@example.com"
  5. }
复制代码
d. Preview

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

e. Timing


展示请求各个阶段的时间斲丧，帮助优化性能。具体分为以下几个阶段：
Queueing：请求排队等待的时间。
Stalled：请求被阻塞的时间。
DNS Lookup：解析域名的时间。
Initial Connection：创建TCP连接的时间。
SSL：SSL/TLS握手的时间。
Request Sent：发送请求的时间。
Waiting (TTFB)：等待第一个字节响应的时间。
Content Download：下载响应内容的时间。
4. 实际操纵步骤

假设你有一个前端页面调用了后端API来获取用户信息，你可以按照以下步骤进行查看：
打开欣赏器开发者工具（F12），切换到 Network 标签页。
革新页面或触发相关操纵（如点击按钮），确保API请求被发送。
在 Network 列表中找到对应的API请求（例如/api/user）。
点击该请求行，查看具体的请求和响应信息，包罗：
请求方法（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：答应的请求头。

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4