前端调⽤接⼝（api）注意事项调⽤接⼝（api）报错如何处理
⼀、问题
调⽤了后端提供的⼀个接⼝，在两个不同地⽅⽤了，结果在⼀个地⽅正常获取到了数据，⼀个地⽅⼀直在浏览器控制台(console)报错500。
⼆、解决思路
1.检查代码
1）查看代码在 两个 地⽅的书写是否⼀致。
2）查看代码中传递给 接⼝ 的参数是否正确
2.检查nextwork中的请求
如何查看html代码
1）在浏览器的开发者⼯具中（在浏览器页⾯，按F12即可弹出），点击 network菜单项
2）在network界⾯点击  Fetch/XHR 菜单（专门⽤于存放 接⼝）
出现如图1所⽰的界⾯：
图1
注：此处（Fetch/XHR)的 status是浏览器的状态码
3.在图1所⽰的界⾯中，点击你现在需要使⽤(调试)的接⼝，此处以findAllRoom接⼝为例。
1）出现如图2所⽰的界⾯：
图2
2）如图2所⽰，界⾯右侧，默认选中 headers菜单栏，下⽅有四项数据。
General：包含请求的url地址，请求的⽅式、请求的状态等
Response Headers：响应头中的内容
Request  Headers：请求头中的内容
Query String Parameters：请求数据时传递的参数（你在代码中实际给 接⼝ 传递的数据及格式)
需要仔细检查此处 传递的参数及格式 是否正确。（虽然代码中写了⼀样的参数，但有可能因为使⽤ 别⼈的组件 或 第三⽅库 导致传递的参数或参数的格式 可能不正确。----我就是因为使⽤别⼈的组件 传递的参数格式 不正确，⼀直获取不到数据，还报错 500.
3）点击 preview 菜单项，展开数据，可以查看返回的数据以及服务器返回的状态 status。如图3所⽰。
图3
注：此处（preView）的状态码 status是 服务器端 返回的状态码
4）如果 代码中的参数 和 headers中的参数 都正确，则是后端的接⼝有问题，可以和后端商讨。
三、总结
1.调⽤接⼝有问题：主要可以检查 代码 和 network 中传递的参数 和 参数的格式 是否正确。
2.浏览器状态码status 和 服务器状态码status 是不同的。
浏览器状态码：标志请求是否正确
服务器状态码：标志响应是否正确
3.当⽤promise等 捕获错误时，是对响应错误的捕获，所以如果要查这个错误，要在 响应（response)中去查看(preview菜单项)。在Fetch/XHR中看到的都是 请求的状态码。
以上提到的console中报错500，在Fetch/XHR中是看不到的，在preview菜单项中才能看到。
4.第⼀次遇到接⼝调⽤出错，记录⼀下，折腾的我快怀疑⾃⼰是个。
/*
希望对你有帮助！
如有错误，欢迎指正！
感谢 rgf 的指导！
*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。