如何优化VSCode提示复杂度为6的React Native函数？

函数复杂度偏高通常源于多职责混合、多层分支嵌套、异步逻辑交织等问题。针对你遇到的情况，可以通过以下步骤拆解优化：

核心优化思路 #

将单一函数的多个职责拆分到独立模块，扁平化异步逻辑，集中处理错误与校验，从而降低主函数的复杂度。

1. 拆分单一职责函数 #

把token校验、请求发送、数据验证、错误处理等逻辑拆分为独立函数，每个函数只负责一件事：

封装Token校验逻辑

function validateToken(token) {
  if (!token) {
    throw new Error('无可用身份令牌');
  }
  return token;
}

封装请求发送与响应校验

async function fetchCategoriesApi(token) {
  const response = await fetch('https://api.example.com/categories', {
    headers: { Authorization: `Bearer ${token}` }
  });

  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }

  return response.json();
}

封装返回数据校验

function validateCategoryData(data) {
  if (!data || !Array.isArray(data) || data.length === 0) {
    return []; // 或根据业务需求抛出错误
  }
  return data;
}

集中处理错误逻辑

function handleFetchError(error) {
  if (error.message.includes('401')) {
    console.error('令牌已过期，请重新认证');
    // 可在此添加令牌刷新逻辑
  } else {
    console.error('获取分类数据失败：', error.message);
  }
  return null; // 或返回业务默认值
}

2. 重构主函数 #

将拆分后的函数组合，扁平化异步逻辑，主函数仅负责流程串联：

async function fetchCategoryData() {
  try {
    const token = validateToken(await retrieveToken());
    const rawData = await fetchCategoriesApi(token);
    return validateCategoryData(rawData);
  } catch (error) {
    return handleFetchError(error);
  }
}

优化效果说明 #

• 主函数复杂度大幅降低：原函数中的多层if分支被拆分到独立函数，主函数仅保留核心流程，复杂度可降至1~2。
• 代码可读性与可维护性提升：每个函数职责明确，便于单独测试、修改和复用。
• 错误处理更统一：避免重复的日志输出和错误判断逻辑，减少冗余代码。

额外优化建议 #

• 抽离API常量：将接口地址、请求头配置等抽为常量，避免硬编码：

  const API_BASE = 'https://api.example.com';
  const CATEGORIES_URL = `${API_BASE}/categories`;
  

• 引入类型校验：使用TypeScript定义数据类型，提前发现数据结构问题，减少运行时分支判断。
• 添加重试机制：针对临时网络错误，可在fetchCategoriesApi中添加有限次数的重试逻辑。

内容的提问来源于stack exchange，提问作者mightycode Newton