异步XHR文件上传完成后如何缩短超时时间？

哈哈，Stack Overflow确实是开发者的救星，但偶尔也会遇到这种卡壳的问题，我来帮你搞定！

你遇到的核心问题是：XHR默认的timeout属性是从请求发起（send调用）到整个请求完成的总时长，但你希望文件上传阶段用较长超时，服务器响应阶段用较短超时。其实通过监听XHR的上传事件，就能轻松实现这个需求：

实现思路 #

XHR对象自带一个upload属性，它包含了上传相关的事件。我们可以监听upload.load事件——这个事件触发时，意味着文件已经完全发送到服务器，接下来只需要等待服务器的响应。此时我们动态修改XHR的timeout值，就能缩短后续等待的超时时间。

代码示例 #

// 创建XHR对象
const uploadXHR = new XMLHttpRequest();
uploadXHR.open('POST', '你的服务器上传接口地址', true);

// 1. 初始设置较长超时，给文件上传留足时间
uploadXHR.timeout = 10000; // 10秒

// 2. 监听上传完成事件：文件已发送到服务器，开始等待响应
uploadXHR.upload.addEventListener('load', () => {
  console.log('文件上传完成，开始等待服务器响应');
  // 缩短超时时间，比如改成3秒
  uploadXHR.timeout = 3000;
});

// 3. 监听超时事件，给用户反馈
uploadXHR.addEventListener('timeout', () => {
  alert('请求超时，请检查网络连接或稍后重试');
});

// 4. 监听上传/请求成功事件
uploadXHR.addEventListener('load', () => {
  if (uploadXHR.status >= 200 && uploadXHR.status < 300) {
    alert('文件上传成功！');
  } else {
    alert(`上传失败，服务器返回状态码：${uploadXHR.status}`);
  }
});

// 5. 监听上传错误事件
uploadXHR.addEventListener('error', (err) => {
  console.error('上传过程出错：', err);
  alert('上传失败，请稍后重试');
});

// 准备FormData并发送请求
const formData = new FormData();
formData.append('file', document.getElementById('file-input').files[0]);
uploadXHR.send(formData);

额外注意事项 #

• 兼容性：现代Chrome和Firefox浏览器都完美支持XHR的upload事件，不用担心兼容问题。
• 超时值调整：你可以根据自己的业务场景调整两个阶段的超时时间，比如大文件上传时初始超时设得更长，服务器响应快的话可以把后续超时设得更短。
• 备选方案：如果担心upload.load事件触发时机有延迟，也可以监听upload.progress事件，当event.loaded === event.total时，说明文件已上传完成，再修改超时值，效果是一样的。

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