JavaScript Fetch API 怎么实现接口请求熔断降级-js教程-PHP中文网

在 javascript 中实现接口请求的熔断降级，核心思路是维护一个基于时间窗口的错误计数器，当单位时间内失败次数超过阈值时，自动切断后续请求并返回预设的降级数据。具体做法是封装一个拦截器或高阶函数，在每次 fetch 调用后检查响应状态，若成功则重置计数器，若失败则累加计数；一旦触发熔断，立即跳过网络请求并执行降级逻辑。

JavaScript Fetch API 怎么实现接口请求熔断降级

如何设计熔断器的状态机与判断逻辑

熔断器通常包含三个状态：关闭（Closed）、打开（Open）和半开（Half-Open）。关闭状态下允许请求通过，但需记录错误；打开状态下直接拒绝请求并执行降级；半开状态用于测试服务是否恢复。判断逻辑依赖于当前时间与上次熔断时间的差值，以及滑动窗口内的错误率。

JavaScript Fetch API 怎么实现接口请求熔断降级

class CircuitBreaker {
  constructor(options = {}) {
    this.errorThreshold = options.errorThreshold || 5;
    this.timeout = options.timeout || 60000;
    this.state = 'CLOSED';
    this.errorCount = 0;
    this.lastFailureTime = null;
  }

  async execute(fn, fallback) {
    if (this.state === 'OPEN') {
      const now = Date.now();
      if (now - this.lastFailureTime > this.timeout) {
        this.state = 'HALF_OPEN';
      } else {
        return fallback();
      }
    }

    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onError();
      return fallback(error);
    }
  }

  onSuccess() {
    this.errorCount = 0;
    this.state = 'CLOSED';
  }

  onError() {
    this.errorCount++;
    this.lastFailureTime = Date.now();
    if (this.errorCount >= this.errorThreshold) {
      this.state = 'OPEN';
    }
  }
}

// 使用示例
const breaker = new CircuitBreaker({ errorThreshold: 3, timeout: 10000 });
const data = await breaker.execute(
  () => fetch('/api/data').then(r => r.json()),
  () => ({ cached: true, data: [] }) // 降级数据
);

如何在实际项目中集成 Fetch 拦截器

在实际项目中，可以通过重写全局 fetch 或使用 Axios 拦截器来统一处理熔断逻辑。这里展示如何在不修改业务代码的前提下，通过装饰器模式将熔断器注入到现有的请求流程中。关键在于捕获所有非 2xx 的状态码和网络异常，并将其传递给熔断器实例。

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

JavaScript Fetch API 怎么实现接口请求熔断降级

const originalFetch = window.fetch;
const circuitBreakers = new Map();

function getCircuitBreaker(url) {
  if (!circuitBreakers.has(url)) {
    circuitBreakers.set(url, new CircuitBreaker());
  }
  return circuitBreakers.get(url);
}

window.fetch = async function(...args) {
  const url = args[0];
  const breaker = getCircuitBreaker(url);
  
  return breaker.execute(
    () => originalFetch.apply(this, args),
    (err) => {
      console.warn('Circuit Open, using fallback for', url);
      return Promise.resolve(new Response(JSON.stringify({ error: 'Service Unavailable' }), { status: 503 }));
    }
  );
};

// 业务代码无需改动
fetch('/api/users').then(res => res.json()).then(console.log);