Chrome接口请求一直是pending状态,但接口实际上是正常的

1.现象

个别机器突然出现Chrome访问我司产品异常,本该通过接口获取的数据没有呈现,之前都是好好的,而且其他机器同样用同版本Chrome访问正常。

出现问题的机器重装Chrome问题依然存在,直到重装了操作系统才恢复正常。

2.分析

打开Chrome开发者工具发现,部分接口请求一直处于pending状态,进一步分析发现处于pending状态的请求是fetch和vue-resource发出的,jquery的ajax请求却是正常的。(不要问我为什么一个系统中存在这么多种请求方式-_-)

3.探索

首先,尝试用最新的版本替换。

幸运的是,vue-resource用当前最新版本(v1.3.1)替换后就正常了。

至于fetch,因为考虑兼容低版本的Chrome,没有用Chrome自带的fetch,而是用了fetch polyfill(https://github.com/github/fetch),更新了当前最新版本(2.0.3)后问题依然存在。

于是乎我就开始看fetch polyfill的源码了。

?
1
2
3
if ( 'responseType' in xhr && support.blob) {
         xhr.responseType = 'blob'
}

 虽然看不出为什么会导致个别机器Chrome有问题,但是因为我们的接口只返回文本数据,我就把responseType改成text,问题解决了!

?
1
2
3
if ( 'responseType' in xhr) {
         xhr.responseType = 'text'
}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
可能有多种原因导致前端页面在 network 中一直处于 pending 状态并最终显示接口超时。以下是一些可能的原因: 1. 服务器响应慢:服务器处理请求的时间超过了前端的等待时间,导致前端页面持续处于 pending 状态。这可能是由于服务器负载过高、数据库查询缓慢或者其他耗时操作引起的。 2. 网络连接问题:前端与后端之间的网络连接存在问题,导致请求无法成功完成。这可能是由于网络延迟、网络故障、网络拥堵等原因引起的。 3. CORS(跨域资源共享)问题:如果前端页面和后端接口不在同一个域下,可能会出现跨域请求问题。在某些情况下,浏览器会发送一个预检请求(OPTIONS 请求),如果预检请求失败或超时,前端页面可能无法获取到服务器的响应。 4. 代理设置问题:如果前端通过代理访问后端接口,可能会出现代理设置不正确或代理服务器出现故障的情况。 为了确定具体原因,你可以采取以下步骤来进行排查: 1. 检查服务器日志:查看服务器日志,确认是否有任何错误或异常信息。 2. 检查网络连接:使用网络工具(如 ping、traceroute)测试前端与后端之间的网络连接,确认是否存在延迟或故障。 3. 检查跨域设置:确认后端是否正确配置了跨域资源共享(CORS),并确保前端请求符合跨域规则。 4. 测试代理设置:尝试直接访问后端接口,绕过代理,看是否能够获取到正确的响应。 根据具体情况,你可以进一步深入排查问题并采取相应的解决措施。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值