React Redux+Saga+Superagent下API pending耗时与Chrome面板不符

问题现象 #

• 应用基于React Redux技术栈，使用redux-saga管理异步流程、superagent作为HTTP客户端发起HTTPS API调用时，接口请求会卡在pending状态4-5秒
• 查看Chrome开发者工具网络面板的耗时分解，服务端实际响应仅耗时数毫秒，整体请求总时长约5秒，测试环境无其他并行请求占用浏览器网络资源，延迟问题仍稳定复现
• 切换测试方式：使用Postman、curl直接请求同一API接口，响应仅需毫秒级，不存在该延迟
• Chrome网络面板耗时分析参考图：

相关代码 #

superagent 封装的统一API客户端 #

constructor() {
  methods.forEach(
    method =>
      (this[method] = (
        path: string,
        { params, data, timeout, authToken }: APIRequest = {}
      ) =>
        new Promise((resolve, reject) => {
          const request = superagent[method](formatUrl(path));
          request.timeout(timeout || 60000);
          request.set('Authorization', authToken || this.getToken());
          if (params) {
            request.query(params);
          }

          if (data) {
            request.send(data);
          }

          request.then((body: Response) => {
            resolve(body.body)
          }).catch((err: ResponseError) => {
            // 401状态临时处理：根据当前路径跳转对应会话过期页
            if (err.status === 401) {
              if (window.location.href.indexOf('/customer/') > -1) {
                window.history.pushState('', '', '/customer/session-expired')
              } else {
                window.history.pushState('', '', '/designer/session-expired')
              }
            }
            reject(err)
          });
        }))
  );
}

redux-saga 接口调用逻辑 #

const result = yield SpacecraftBackendClient.post(
  `/api/v1.0/xyz/${abc}/init3D`,
  {
    data: {
      abc,
      sessionId,
      xyz: convertConnectionType(controller)
    }
  },
);
yield takeLatest(cartActionTypes.INIT_3D, init3D);

内容的提问来源于stack exchange，提问作者Shreya Shahi