如何通过Chrome控制台判断两个接口实际的返回时间？

Question

破案了，可以通过waterfall的end time排序，得到真实接口返回顺序。

如题，如何通过Chrome控制台判断两个接口实际的返回时间？

现实场景是：同时请求接口A和B，前辈写的代码通过接口A和B返回的数据对同一个变量赋值。由于接口实际返回的时间不一致，导致赋值的顺序不一致。

所以想查一下，通过控制台看两个接口的数据真实到达时间。

由于联调环境与本地不一致，不考虑在代码中console.log()判断。

Answer 1

通过waterfall的end time排序，得到真实接口返回顺序。

Answer 2

看下network 请求有一列是waterfall，鼠标移动上去，可以看到接口请求和返回时间。或者点击接口看timing

Answer 3

如果单纯是为了排查 A/B接口 返回的顺序，为什么一定要获取接口返回的真实时间？

• 通过在 network 中对 Time 字段做个升序分析就能知道谁先谁后了
  
• 其次，两个接口对同一个变量赋值，那么到底是以那个为准？这需求也太奇怪了

Answer 4

按下 F12 之后可以在 network(网络)面板看到接口请求消耗的时间。

另外一个，如果想要保证赋值的顺序是确定的，可以用 .then 这样的链式调用方式来处理。
或者用 Promise.all 来自己操作先后赋值的顺序。

相关阅读
Promise - JavaScript | MDN
Promise.all() - JavaScript | MDN

深入学习Promise调用链 - SegmentFault

Answer 5

控制台中，输入performance.getEntries() 可以获得当前页面所有网络的请求情况。可以去找到两个请求的开始时间，结束时间。
另外， 代码中也可以拿来判断，我之前用这个做过接口请求的统计，加上服务端的统计，就能统计网络耗时。