JavaScript中Ajax怎么设置timeout超时时间并捕获超时错误-js教程-PHP中文网

javascript中设置ajax超时需区分xmlhttprequest（设timeout属性+ontimeout监听）、fetch（abortcontroller+promise.race模拟）和axios（timeout配置+捕获econnaborted错误），三者机制不同且各有注意事项。

javascript中ajax怎么设置timeout超时时间并捕获超时错误

在 JavaScript 中使用 Ajax 设置 timeout 超时时间并捕获超时错误，关键在于正确配置请求的 timeout 属性，并在 onerror 或 ontimeout 回调中识别超时场景。原生 XMLHttpRequest 和现代 fetch 的处理方式不同，需区别对待。

XMLHttpRequest 中设置 timeout 并捕获超时

XMLHttpRequest 原生支持 timeout 属性和 ontimeout 事件，这是最直接的方式：

给 xhr.timeout 赋值（单位为毫秒），例如 xhr.timeout = 5000 表示 5 秒超时
必须监听 xhr.ontimeout，该回调只在超时发生时触发，此时 xhr.readyState === 0，且 xhr.status === 0
onerror 也会被触发（超时属于网络错误的一种），但无法区分是连接失败还是超时，因此优先依赖 ontimeout

示例：

xhr.timeout = 3000;
xhr.ontimeout = () => {
  console.error('请求超时');
};
xhr.onerror = () => {
  if (xhr.readyState === 0) {
    console.warn('可能是超时或网络中断');
  }
};
xhr.open('GET', '/api/data');
xhr.send();

fetch 中实现 timeout（需手动封装）

fetch 本身不提供 timeout 参数，但可通过 AbortController + Promise.race 模拟超时控制：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

创建 AbortController 实例，用其 signal 传入 fetch 选项
用 setTimeout 触发 controller.abort()，并在 Promise race 中与 fetch 竞争
捕获 AbortError（注意：Chrome/Firefox 返回 DOMException，message 含 "aborted"）

示例：

使用 axios 时的 timeout 配置

axios 内置 timeout 选项，超时会以 Cancel 类型错误抛出，可通过 isAxiosError 和 code === ECONNABORTED 判断：

配置 timeout: 3000 即可启用
错误对象中 error.code === 'ECONNABORTED' 是超时的明确标识
注意：axios 默认不会自动重试超时请求，需自行处理

示例：

axios.get('/api/data', { timeout: 3000 })
  .catch(error => {
    if (axios.isAxiosError(error) && error.code === 'ECONNABORTED') {
      console.error('请求超时');
    }
  });