React.JS中Promise/Fetch API重复代码封装及数组全局访问问题

嘿，我来帮你搞定这个重复代码的问题！你现在遇到的情况很常见，完全不用靠全局数组来解决——咱们把重复的API调用逻辑抽成独立函数，然后让每个业务函数按需调用它就行，既保持代码整洁，又能让每个函数专注自己的处理逻辑。

第一步：封装公共的数据获取逻辑 #

首先，把两个函数里重复的Promise.all和fetch调用抽成一个单独的异步函数，它负责获取并返回你需要的两个数组。这样所有需要用到这两个文件数据的地方，都可以直接调用这个函数，不用再重复写Fetch代码。

这里我还把.then改成了await，让代码更易读（毕竟你已经用了async关键字）：

// 封装公共的文件获取逻辑
const fetchFiles = async () => {
  try {
    // 并行获取两个文件的文本内容
    const [firstText, secondText] = await Promise.all([
      fetch(firstFile).then(res => res.text()),
      fetch(secondFile).then(res => res.text())
    ]);

    // 注意：如果你的文本文件内容是数组格式（比如每行一个元素，或者JSON数组）
    // 这里需要把文本转成实际的数组，比如：
    // const firstArray = firstText.split('\n').filter(line => line.trim()); // 按行分割并过滤空行
    // const secondArray = JSON.parse(secondText); // 如果是JSON格式的数组

    // 暂时先按你的原代码逻辑赋值，你可以根据实际文本格式调整
    const firstArray = firstText;
    const secondArray = secondText;

    return { firstArray, secondArray };
  } catch (error) {
    // 别忘了加错误处理！避免Fetch失败时整个程序崩溃
    console.error('获取文件内容失败:', error);
    throw error; // 抛出错误让调用方可以捕获处理
  }
};

第二步：改造原有业务函数 #

现在你的getFirstFunc和getSecondFunc只需要调用上面的fetchFiles函数拿到数据，然后专注处理自己的业务逻辑就行，完全不用重复写Fetch部分：

getFirstFunc = async (e) => {
  try {
    // 调用封装好的函数获取数组
    const { firstArray, secondArray } = await fetchFiles();
    
    let results = [];
    for (let i = 0; i < firstArray.length; i++) {
      for (let j = 0; j < secondArray.length; j++ ) {
        // 这里写第一个函数的专属处理逻辑
        // 比如：results.push(firstArray[i] + ' - ' + secondArray[j]);
      }
    }

    // 如果需要把结果存到React组件的状态里，这里可以用setState
    // 比如：this.setState({ firstResults: results });
  } catch (error) {
    console.error('处理第一个函数逻辑失败:', error);
  }
};

getSecondFunc = async (e) => {
  try {
    const { firstArray, secondArray } = await fetchFiles();
    
    let results = [];
    for (let i = 0; i < firstArray.length; i++) {
      for (let j = 0; j < secondArray.length; j++ ) {
        // 这里写第二个函数的专属处理逻辑
      }
    }

    // 同样可以把结果存到组件状态：this.setState({ secondResults: results });
  } catch (error) {
    console.error('处理第二个函数逻辑失败:', error);
  }
};

进阶：如果循环逻辑也重复，再抽成处理函数 #

如果你的两个函数里的双层循环结构也完全一样，只是内部的处理逻辑不同，还可以把循环部分也抽成一个公共函数，把具体的处理逻辑作为参数传进去，进一步减少重复：

// 封装公共的数组处理逻辑
const processArrays = (firstArray, secondArray, handleItem) => {
  let results = [];
  for (let i = 0; i < firstArray.length; i++) {
    for (let j = 0; j < secondArray.length; j++ ) {
      // 调用传入的处理函数，把当前索引、数组和结果数组传进去
      handleItem(i, j, firstArray, secondArray, results);
    }
  }
  return results;
};

// 改造后的getFirstFunc
getFirstFunc = async (e) => {
  try {
    const { firstArray, secondArray } = await fetchFiles();
    const results = processArrays(firstArray, secondArray, (i, j, first, second, res) => {
      // 第一个函数的专属处理逻辑
      res.push(`${first[i]} 匹配 ${second[j]}`);
    });
    // 存状态或使用结果
  } catch (err) { /* 错误处理 */ }
};

// 改造后的getSecondFunc
getSecondFunc = async (e) => {
  try {
    const { firstArray, secondArray } = await fetchFiles();
    const results = processArrays(firstArray, secondArray, (i, j, first, second, res) => {
      // 第二个函数的专属处理逻辑
      if (first[i] === second[j]) {
        res.push(`找到匹配项：${first[i]}`);
      }
    });
    // 存状态或使用结果
  } catch (err) { /* 错误处理 */ }
};

为什么不用全局数组？ #

全局数组在React里是不推荐的，因为：

• 全局变量容易造成状态混乱，多个函数修改同一个全局数组时，很难追踪变化；
• React组件无法感知全局数组的变化，也就不会自动重新渲染，不符合React的状态管理思路。

如果需要在多个组件或函数之间共享这些数组数据，更好的方式是把数据存在组件的状态（useState/this.state）或者用React Context、Redux等状态管理工具，这样数据变化时组件能自动更新。

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