一、问题

调用了后端提供的一个接口，在两个不同地方用了，结果在一个地方正常获取到了数据，一个地方一直在浏览器控制台(console)报错 500。

二、解决思路

1.检查代码

        1）查看代码在 两个 地方的书写是否一致。

        2）查看代码中传递给 接口 的参数是否正确

2.检查nextwork中的请求

        1）在浏览器的开发者工具中（在浏览器页面,按F12即可弹出），点击 network菜单项

        2）在network界面点击  Fetch/XHR 菜单（专门用于存放 接口）

             出现如图1所示的界面：

     注：此处（Fetch/XHR)的 status是浏览器的状态码

3.在图1所示的界面中，点击你现在需要使用(调试)的接口,此处以findAllRoom接口为例。

          1）出现如图2所示的界面：

         2）如图2所示，界面右侧，默认选中 headers菜单栏，下方有四项数据。

              General:包含请求的url地址,请求的方式、请求的状态等

             Response Headers：响应头中的内容

             Request  Headers：请求头中的内容

             Query String Parameters:请求数据时传递的参数（你在代码中实际给 接口 传递的数据及格式)

             需要仔细检查此处 传递的参数及格式 是否正确。（虽然代码中写了一样的参数,但有可能因为使用 别人的组件 或 第三方库 导致传递的参数或参数的格式 可能不正确。----我就是因为使用别人的组件 传递的参数格式 不正确，一直获取不到数据，还报错 500.

        3）点击 preview 菜单项，展开数据，可以查看返回的数据以及服务器返回的状态 status。如图3所示。

         注：此处（preView）的状态码 status是 服务器端 返回的状态码

         4）如果 代码中的参数 和 headers中的参数 都正确，则是后端的接口有问题，可以和后端商讨。

三、总结

1.调用接口有问题：主要可以检查 代码 和 network 中传递的参数 和 参数的格式 是否正确。

2.浏览器状态码status 和 服务器状态码status 是不同的。

   浏览器状态码：标志请求是否正确

   服务器状态码：标志响应是否正确

3.当用promise等 捕获错误时,是对响应错误的捕获，所以如果要查找这个错误，要在 响应（response)中去查看(preview菜单项)。在 Fetch/XHR中看到的都是 请求的状态码。

    以上提到的console中报错500,在Fetch/XHR中是看不到的，在preview菜单项中才能看到。

 4.第一次遇到接口调用出错，记录一下，折腾的我快怀疑自己是个弱智。

/*

希望对你有帮助！

如有错误，欢迎指正！

感谢 rgf 的指导！

*/