JavaScript 怎么实现一个支持动态修改请求超时的灵活函数-js教程-PHP中文网

用闭包封装可配置超时的请求函数：基于 fetch + abortcontroller，timeout 动态传入；支持链式配置的工厂函数更实用；兼容 ie 时可用 xmlhttprequest.timeout；需 cleartimeout 防泄漏、校验 timeout 类型。

javascript 怎么实现一个支持动态修改请求超时的灵活函数

用闭包封装一个可配置超时时间的请求函数，核心是把 timeout 值作为参数传入，而不是硬编码在内部。

用 fetch 封装支持动态 timeout 的函数

直接基于 fetch + AbortController 实现，timeout 可每次调用时传入：

创建 AbortController 实例
用 setTimeout 在指定毫秒后调用 controller.abort()
将 controller.signal 传给 fetch 的 signal 选项
捕获 AbortError 并统一抛出超时错误

示例代码：

function request(url, options = {}) {
  return (timeout = 5000) => {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);

    return fetch(url, {
      ...options,
      signal: controller.signal
    })
      .then(res => {
        clearTimeout(id);
        return res;
      })
      .catch(err => {
        clearTimeout(id);
        if (err.name === 'AbortError') {
          throw new Error(`Request timed out after ${timeout}ms`);
        }
        throw err;
      });
  };
}

// 使用：可灵活指定超时时间
const getUser = request('/api/user', { method: 'GET' });

getUser(3000).then(r => r.json()).catch(console.error); // 3s 超时
getUser(10000).then(r => r.json()).catch(console.error); // 10s 超时

支持链式调用与默认 timeout 的工厂函数

更实用的方式是返回一个“请求构造器”，先设默认值，再通过方法动态覆盖：

Alibabacloud Sdk Client Initialization For Java

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

下载

返回对象含 timeout(ms) 方法，返回新函数
最终调用 send() 发起请求
所有配置（url、method、headers、timeout）都可运行时决定

示例：

function createRequest(url, options = {}) {
  let timeout = 5000;
  
  return {
    timeout(ms) {
      timeout = ms;
      return this;
    },
    send() {
      const controller = new AbortController();
      const id = setTimeout(() => controller.abort(), timeout);

      return fetch(url, {
        ...options,
        signal: controller.signal
      })
        .then(res => {
          clearTimeout(id);
          return res;
        })
        .catch(err => {
          clearTimeout(id);
          if (err.name === 'AbortError') {
            throw new Error(`Timeout: ${timeout}ms`);
          }
          throw err;
        });
    }
  };
}

// 使用
createRequest('/api/data')
  .timeout(8000)
  .send()
  .then(r => r.json());

兼容 XMLHttpRequest 的写法（需支持老环境）

若需兼容不支持 AbortController 的浏览器（如 IE），可用 XMLHttpRequest 手动控制：

调用 xhr.timeout = ms 设置原生超时（注意：仅对 open 后生效）
监听 xhr.ontimeout 处理超时逻辑
注意 xhr.timeout 不触发 onerror，需单独处理

简版示例：

function xhrRequest(url, options = {}) {
  return (timeout = 5000) => {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(options.method || 'GET', url);

      xhr.timeout = timeout;
      xhr.onload = () => resolve(xhr);
      xhr.onerror = () => reject(new Error('Network error'));
      xhr.ontimeout = () => reject(new Error(`Timeout after ${timeout}ms`));

      if (options.headers) {
        Object.entries(options.headers).forEach(([k, v]) => xhr.setRequestHeader(k, v));
      }

      xhr.send(options.body || null);
    });
  };
}

小贴士：实际使用中的关键细节

避免踩坑，注意这些点：

务必 clearTimeout：Promise 成功或失败后都要清除定时器，防止内存泄漏
timeout 应为数字：传入非数字（如 undefined）会导致立即 abort，建议做类型校验
服务端超时 ≠ 客户端超时：客户端 timeout 只控制请求发起后的等待时间，不包含 DNS、TCP 握手等前置耗时（fetch 中这部分也受 signal 控制）
重试逻辑可叠加：可在上述函数外再包一层 retry，配合动态 timeout 实现退避重试

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南