代码调试助手

问题识别

• 错误位置：const { users } = body; 之后直接调用 users.map(...)。
• 触发场景：当接口返回 {"data": []} 或 {"data": null}、{"users": null}、甚至网络错误时，users 为 undefined 或非数组，执行 map 触发 TypeError: Cannot read properties of undefined (reading 'map')。
• 其它隐患：
  • 未处理 fetch 超时、网络错误、非 2xx 状态码。
  • 未对响应结构做类型校验（users/data 非数组时未兜底）。
  • main 仅在函数抛出时捕获，但当前实现会在 users.map 处直接抛出。

原因解释

• JS 中对 undefined 调用数组方法（如 map）会抛出 TypeError。
• 接口响应结构不固定（users 或 data），且字段可能为 null 或类型不符；代码缺乏容错分支。
• 网络层面未设置超时与重试策略，网络失败或慢响应均可能导致未捕获异常或长时间挂起。

修复代码

下面提供可直接运行的完整示例（Node 18+ 或浏览器环境），包含：

• 兼容响应结构提取（优先 body.users，次选 body.data），类型校验与默认值兜底；
• fetchWithTimeout（超时控制）与简单重试策略（网络错误与 5xx 重试，指数退避）；
• 单元测试示例（不依赖外部服务，基于依赖注入的 fetch mock）；
• 保证异常与网络错误时返回空数组，不向外抛出未捕获异常。

'use strict';

/**
 * 小工具函数：延迟
 */
const delay = (ms) => new Promise((res) => setTimeout(res, ms));

/**
 * 带超时与重试的 fetch 封装
 * - 超时：AbortController
 * - 重试：网络错误/超时或 5xx 时重试，指数退避
 */
async function fetchWithTimeout(
  url,
  fetchOptions = {},
  { timeout = 5000, retries = 2, retryDelay = 300 } = {}
) {
  let lastErr;
  for (let attempt = 0; attempt <= retries; attempt++) {
    const controller = new AbortController();
    const t = setTimeout(() => controller.abort(new Error('Fetch timeout')), timeout);

    try {
      const res = await fetch(url, { ...fetchOptions, signal: controller.signal });
      clearTimeout(t);

      // 非 2xx：5xx 可重试，4xx 直接返回
      if (!res.ok) {
        if (res.status >= 500 && attempt < retries) {
          await delay(retryDelay * Math.pow(2, attempt));
          continue;
        }
        return res; // 交给上层决定如何处理
      }

      return res;
    } catch (err) {
      clearTimeout(t);
      lastErr = err;
      if (attempt < retries) {
        await delay(retryDelay * Math.pow(2, attempt));
        continue;
      }
      throw lastErr;
    }
  }
  // 理论上不可达
  throw lastErr || new Error('Unknown fetch error');
}

/**
 * 规范化从响应体中提取用户列表：
 * - 优先 body.users，其次 body.data
 * - 仅当该字段为数组时返回，否则返回 []
 */
function normalizeUsers(body) {
  if (Array.isArray(body?.users)) return body.users;
  if (Array.isArray(body?.data)) return body.data;
  return [];
}

/**
 * 核心函数：获取活跃用户名（小写）
 * - 兼容 body.users 与 body.data
 * - 结构不符或网络问题 -> 返回 []
 * - 通过 options 支持 fetch 实现、超时与重试配置（便于测试）
 */
async function getActiveUsernames(
  api,
  {
    fetchImpl = fetch, // 允许注入 mock fetch 做单测
    timeout = 5000,
    retries = 2,
    retryDelay = 300,
  } = {}
) {
  try {
    // 使用我们封装的超时/重试 fetch
    const res = await (fetchImpl === fetch
      ? fetchWithTimeout(api, { method: 'GET' }, { timeout, retries, retryDelay })
      : // 若注入了自定义 fetch，则按原样调用（由测试或调用方决定重试/超时）
        fetchImpl(api, { method: 'GET' })
    );

    // 处理非 2xx
    if (!res || res.ok === false) {
      return [];
    }

    // 尝试解析 JSON
    let body;
    try {
      body = await res.json();
    } catch {
      return [];
    }

    // 兼容 users/data，并确保为数组
    const list = normalizeUsers(body);

    // 提取 name，转小写，非法值过滤
    const names = list
      .map((u) => (u && typeof u.name === 'string' ? u.name.toLowerCase() : ''))
      .filter(Boolean);

    return names;
  } catch {
    // 网络错误、超时或重试用尽 -> 返回空数组
    return [];
  }
}

/**
 * Demo 主函数（真实请求；若本地无服务，将打印 active: []）
 */
async function main() {
  const api = 'http://localhost:3000/users';
  const names = await getActiveUsernames(api, {
    timeout: 3000,
    retries: 2,
    retryDelay: 200,
  });
  console.log('active:', names);
}

// --------------- 单元测试示例（基于 fetch 依赖注入，无需外部依赖） ---------------

function createMockResponse(data, status = 200) {
  return {
    ok: status >= 200 && status < 300,
    status,
    async json() {
      return data;
    },
  };
}

function mockFetchFactory(routes) {
  // routes: { [url]: object | Error | function():object }
  return async function mockFetch(url, _opts) {
    if (!(url in routes)) return createMockResponse({}, 404);
    const v = routes[url];
    if (v instanceof Error) throw v;
    if (typeof v === 'function') return createMockResponse(await v(), 200);
    return createMockResponse(v, 200);
  };
}

function assertDeepEqual(actual, expected, msg) {
  const a = JSON.stringify(actual);
  const e = JSON.stringify(expected);
  if (a !== e) {
    throw new Error(`${msg}\nExpected: ${e}\nActual:   ${a}`);
  }
}

async function runTests() {
  const routes = {
    // 1) {"users":[{"name":"Ada"},{"name":"linus"}]} -> ["ada","linus"]
    'http://test/ok-users': { users: [{ name: 'Ada' }, { name: 'linus' }] },

    // 2) {"data":[{"name":"Grace"}]} -> ["grace"]
    'http://test/ok-data': { data: [{ name: 'Grace' }] },

    // 3a) {"data": null} -> []
    'http://test/data-null': { data: null },

    // 3b) 网络错误 -> []
    'http://test/network-error': new Error('network down'),
  };

  const mockFetch = mockFetchFactory(routes);

  const r1 = await getActiveUsernames('http://test/ok-users', { fetchImpl: mockFetch });
  assertDeepEqual(r1, ['ada', 'linus'], 'case 1 failed');

  const r2 = await getActiveUsernames('http://test/ok-data', { fetchImpl: mockFetch });
  assertDeepEqual(r2, ['grace'], 'case 2 failed');

  const r3a = await getActiveUsernames('http://test/data-null', { fetchImpl: mockFetch });
  assertDeepEqual(r3a, [], 'case 3a failed');

  const r3b = await getActiveUsernames('http://test/network-error', { fetchImpl: mockFetch });
  assertDeepEqual(r3b, [], 'case 3b failed');

  console.log('tests: all passed');
}

// 运行示例与测试（两者互不影响；测试不依赖真实网络）
main().catch((err) => console.error('fatal:', err));
runTests().catch((err) => {
  console.error('tests: failed ->', err);
});

简要改进说明与优化建议

• 结构容错与默认值：
  • 使用 normalizeUsers 统一从 body.users/body.data 中提取并校验为数组，缺省返回 []。
  • 在映射阶段对 name 做类型判断，非法值过滤，避免再次抛错。
• 网络稳健性：
  • 引入 fetchWithTimeout，支持超时（AbortController）与指数退避重试（网络错误/超时/5xx）。
  • 对非 2xx 响应、解析失败、网络异常统一返回 []，避免未捕获异常破坏主流程。
• 可测试性：
  • getActiveUsernames 支持注入 fetch 实现，便于使用本地 mock 或 fetch-mock 做单测。
  • 提供自包含的 mock 示例与断言，覆盖题述三种测试条件。
• 进一步建议：
  • 若需要区分错误类型，可在返回结构中携带 error 字段或使用 Result 风格（如 { ok: true, data: [...] }）。
  • 在生产环境中记录失败原因（HTTP 状态、错误栈），以便排障与观测。