使用Axios递归获取数据并拼接结果的实现方案

嘿，你的思路完全没问题——用递归遍历递增的URL，把每个接口返回的数组拼接起来，直到遇到404就停止。不过你给出的代码还没处理错误分支，我来帮你补全并优化，让它能正常工作：

// 初始化存储所有数据的数组
const returnArray = [];

async function getData(count) {
  try {
    const response = await axios.get(`http://www.data.com/${count}`);
    // 合并当前接口返回的数组到总数组
    returnArray.push(...response.data);
    // 递归调用，继续请求下一个编号
    return getData(count + 1);
  } catch (error) {
    // 判断是否是404错误，这是我们的终止条件
    if (error.response?.status === 404) {
      // 遇到404，返回最终拼接好的数组
      return returnArray;
    } else {
      // 处理其他错误（比如网络问题、500等），抛出错误让调用者处理
      throw new Error(`请求出错（非404）: ${error.message}`);
    }
  }
}

// 调用示例：从编号1开始请求
getData(1)
  .then(fullData => {
    console.log('所有拼接好的数据:', fullData);
  })
  .catch(err => {
    console.error('请求过程中出现非404错误:', err);
  });

几个关键细节说明： #

• 异步处理优化：我把代码改成了async/await写法，比原来的.then()嵌套更易读，逻辑更清晰
• 终止条件明确：在catch分支里专门判断404状态，只有遇到404才停止递归并返回结果，其他错误会直接抛出，避免静默失败
• 数组合并效率：用push(...response.data)代替concat，因为concat会返回新数组，而push直接修改原数组，数据量大时性能差异会更明显
• 错误边界：保留了对非404错误的处理，比如网络中断、服务器内部错误等，这样调用者可以及时捕获并处理这些异常

如果你更习惯原来的.then()链式写法，也可以用这个版本：

var returnArray = [];

function getData(count) {
  return axios.get(`http://www.data.com/${count}`)
    .then(function(response) {
      returnArray = returnArray.concat(response.data);
      return getData(count + 1);
    })
    .catch(function(error) {
      if (error.response?.status === 404) {
        return returnArray;
      } else {
        throw error;
      }
    });
}

// 调用方式
getData(1)
  .then(result => console.log('总数据:', result))
  .catch(err => console.error('异常:', err));

两种写法核心逻辑一致：递归请求递增URL，成功就合并数据，遇到404就终止并返回结果，其他错误向上抛出。

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