JavaScript 怎么在接口调用失败时实现降级备用数据方案-js教程-PHP中文网

接口调用失败时返回备用数据，核心是用try...catch或.catch()捕获错误并在错误分支返回预设本地数据；可结合localstorage缓存实现“上一次成功数据”降级，支持时间戳过期判断；还可封装safefetch通用函数，支持自定义fallback逻辑。

javascript 怎么在接口调用失败时实现降级备用数据方案

接口调用失败时返回备用数据，核心是用 try...catch 或 .catch() 捕获错误，并在错误分支中返回预设的本地数据或兜底逻辑。

使用 async/await + try/catch 返回静态备用数据

适合简单场景，比如列表页加载失败时展示上次缓存的数据或默认空数组：

async function fetchUserData() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.warn('接口请求失败，启用备用数据', err);
    // 返回本地定义的备用数据（可来自内存、localStorage 或硬编码）
    return {
      id: -1,
      name: '游客',
      avatar: '/assets/avatar-default.png',
      permissions: []
    };
  }
}

结合 localStorage 缓存实现“上一次成功数据”降级

用户上次成功加载的数据往往比纯静态兜底更合理，尤其对非实时性要求高的页面：

Alibabacloud Sdk Client Initialization For Java

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

下载

请求成功后，立即将结果存入 localStorage（注意控制大小和过期）
请求失败时，优先读取 localStorage 中的缓存数据
可加时间戳判断是否过期，过期则返回更保守的默认值

function getCachedData(key) {
  const item = localStorage.getItem(key);
  if (!item) return null;
  const { data, timestamp } = JSON.parse(item);
  // 10分钟内缓存有效
  if (Date.now() - timestamp async function fetchWithCache() {
try {
const res = await fetch('/api/config');
const data = await res.json();
localStorage.setItem('config-cache', JSON.stringify({
data,
timestamp: Date.now()
}));
return data;
} catch (err) {
const cached = getCachedData('config-cache');
return cached ?? { theme: 'light', language: 'zh-CN' };
}
}

为不同错误类型提供差异化降级策略

网络超时、404、500、JSON 解析失败等应区别对待：

网络错误（TypeError: Failed to fetch）→ 返回离线可用的完整备用数据
404 → 可降级为“资源不存在”的轻量提示对象，避免渲染异常
500 / 502 → 返回带重试按钮的占位数据，或引导用户手动刷新
解析失败 → 检查响应体是否为空或非 JSON，再 fallback

async function fetchWithTypedFallback() {
  try {
    const res = await fetch('/api/profile');
    if (res.status === 404) {
      return { status: 'not-found', user: null };
    }
    if (!res.ok) {
      throw Object.assign(new Error(`API error: ${res.status}`), { status: res.status });
    }
    return await res.json();
  } catch (err) {
    if (err.name === 'TypeError' || err.message.includes('fetch')) {
      // 网络断开
      return { status: 'offline', user: getOfflineUser() };
    }
    if (err.status === 500 || err.status === 502) {
      return { status: 'server-error', retryable: true };
    }
    // 兜底
    return { status: 'unknown-error', user: getDefaultUser() };
  }
}

封装通用降级请求函数，支持传入备用数据生成器

避免每个接口都写重复逻辑，抽成可复用工具：

async function safeFetch(url, options = {}, fallbackFn = () => ({})) {
  try {
    const res = await fetch(url, options);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error(`[safeFetch] failed for ${url}:`, err);
    return typeof fallbackFn === 'function' ? fallbackFn(err) : fallbackFn;
  }
}
<p>// 使用示例
const user = await safeFetch('/api/user', {}, () => ({
id: 0,
name: '加载中...',
isOnline: false
}));
</p>

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