求助：如何用Axios从API分页获取全部商品列表

我完全懂你这种卡在分页循环上的头疼——用Axios这种基于Promise的工具处理分页，尤其是要等到404才停止，确实容易在异步逻辑上绕晕。我给你一个直白靠谱的实现方案，一步步讲清楚：

最直观的方式是用async/await配合while循环，因为它能让异步代码看起来像同步逻辑，完美适配这种“请求-等待-判断-再请求”的分页场景。我们会维护一个总数组存所有商品，每次请求一页数据后推入数组，页码递增，直到API返回404就终止循环。

import axios from 'axios'; // 如果你用CommonJS就用require('axios')

async function fetchAllProducts() {
  const allProducts = [];
  let currentPage = 1;
  const pageSize = 200;

  while (true) {
    try {
      // 发起分页请求，注意参数要和你的API匹配，有些API用offset而不是page
      const res = await axios.get('/products', {
        params: {
          page: currentPage,
          limit: pageSize
        }
      });

      // 把当前页的商品追加到总数组里，用push(...data)比扩展运算符性能更好
      allProducts.push(...res.data);
      
      // 页码自增，准备请求下一页
      currentPage++;
    } catch (err) {
      // 只在遇到404时终止循环，其他错误（比如500、网络问题）要抛出来
      if (err.response?.status === 404) {
        console.log('所有商品已经获取完毕！');
        break;
      }
      throw new Error(`获取分页数据失败: ${err.message}`);
    }
  }

  return allProducts;
}

// 调用示例
fetchAllProducts()
  .then(products => console.log('总商品数:', products.length, '商品列表:', products))
  .catch(error => console.error('出错了:', error));

• 异步顺序控制：用await确保每次请求完成后再处理下一页，不会出现多页请求并发导致的顺序混乱或重复请求
• 错误区分处理：专门捕获404状态码——这是你和API约定的“无更多数据”的信号，其他错误（比如服务器报错、网络断了）要正常抛出，避免吞掉异常导致排查困难
• 分页参数适配：有些API不用page，而是用offset（比如offset=(currentPage-1)*pageSize），你要根据实际API文档调整params里的参数
• 数组优化：用allProducts.push(...res.data)比[...allProducts, ...res.data]更高效，尤其是当商品数量很大的时候，因为后者会创建新数组，前者直接在原数组上追加

如果之前用自定义Promise没成功，大概率是这几个原因：

• 没处理好异步循环的顺序：比如用普通for循环但没加await，导致所有请求同时发出去，逻辑完全乱掉
• 错误处理没区分404：比如把所有错误都当成终止信号，或者没正确捕获到404状态码
• 递归实现时状态丢失：比如每次递归都重新初始化数组，或者页码没正确传递，导致数据累加失败

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