Initial connection超时接口无法正常请求Status canceled

问题描述

最近上了一版需求，其中有一个接口因为后端的计算量超级巨大，导致接口时间要达到七八秒才能返回对应结果。

上了生产环境以后，请求总是失败。

测试环境是好好的...

查看控制台请求发送的报文相关信息如下：

笔者看一下报文，发现请求的状态从开始的pending等待到最后的canceled取消。

点开请求的Timing面板查看，发现请求卡在Connection Star的Initial connection地方不往下走了。

Initial connection是建立TCP连接的意思，笔者不禁思索，为啥好好的请求，TCP连接连不上了啊，也是一脸懵。

于是，笔者去百度如何解决Initial connection过慢失败问题，发现网上的帖子众说纷纭，如：可能是一个域名下挂着两个ip、如：可能是域名解析DNS问题之类的等...

与此同时，后端同事也在看如何优化自己的接口，让接口返回快速一些...

前后端就这样各自研究了一下午。

解决方案

其实一开始方向就错了，不应该看Initial connection超时就认为是什么环境域名导致TCP连接不上（公司测试环境是ip生产环境是域名），导致TCP连接不上的原因有很多。

其中有一点就是前端限制了超时时间，导致了TCP没时间去进行连接、去进行三次握手四次挥手，所以最终的解决方案是：

前端放开超时时间axios中的timeout超时时间限制

既然这个请求会达到七八秒，那么这个就将超时时间设置为16秒，这样的话，时间足够用了。

import axios from "axios";
const http = axios.create({
    timeout: 16000 // 给予接口足够的时间
})

这样设置以后，发现，问题解决

第一张图是失败的超时取消的请求，再附上一张成功的不超时的请求