如何将Promise的.then子句实现为循环重复执行？

嘿，这个需求我太熟了——分页拉取数据一直是异步处理里的高频场景，直接用普通循环肯定搞不定（毕竟异步请求不会等循环走完），用递归包裹Promise链就是最优雅的解决方案，完美契合你要的「等上一次.then执行完再判断是否重复」的逻辑！

核心思路 #

每次异步请求完成后，先处理返回的数据，再检查退出条件：

• 如果满足退出条件（比如已经拉完所有页），就结束流程并返回最终结果；
• 如果不满足，就发起下一次请求，重复整个流程。

简化模拟示例 #

先拿你提到的模拟场景举例，假设我们有一个模拟分页接口的函数fetchPage(pageNum)，它会返回一个Promise，包含当前页的名字列表和是否还有下一页的标记：

// 模拟分页接口：返回第pageNum页的数据
function fetchPage(pageNum) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟最多3页数据
      const hasMore = pageNum < 3;
      resolve({
        names: [`Page${pageNum}-Name1`, `Page${pageNum}-Name2`],
        hasMore: hasMore
      });
    }, 500); // 模拟网络延迟
  });
}

// 存储所有数据的数组
const namesList = [];
// 当前请求的页码
let currentPage = 1;

// 递归函数：负责拉取下一页数据
function fetchNextPage() {
  return fetchPage(currentPage)
    .then(retData => {
      // 处理当前页数据：合并到总列表
      namesList.push.apply(namesList, retData.names);
      console.log(`已拉取第${currentPage}页，当前总数据量：${namesList.length}`);
      
      // 判断是否需要继续拉取
      if (retData.hasMore) {
        currentPage++;
        // 递归调用，继续拉取下一页
        return fetchNextPage();
      } else {
        // 满足退出条件，返回最终结果
        return namesList;
      }
    })
    .catch(err => {
      // 捕获错误，避免递归无限执行
      console.error('拉取数据失败：', err);
      throw err;
    });
}

// 启动流程
fetchNextPage()
  .finally(() => console.log('数据拉取完成'))
  .then(finalList => console.log('最终数据：', finalList));

实际Ajax场景适配 #

把上面的模拟函数换成真实的Ajax请求就行，比如用fetch或者axios：

// 真实的Ajax请求函数（用fetch示例）
function fetchPage(pageNum) {
  return fetch(`/your-api-endpoint?page=${pageNum}&pageSize=10`)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    });
}

// 剩余逻辑和上面的模拟示例完全一致！
// 只需要把退出条件换成你的业务判断：比如 retData.totalPages <= currentPage，或者 retData.data.length === 0

为什么不用普通循环？ #

普通的for/while是同步逻辑，会一次性发起所有请求，根本不会等上一个请求完成再判断是否继续——这不仅会给服务器造成压力，还没法根据上一页的返回结果（比如是否还有下一页）来动态调整请求，完全不符合分页拉取的需求。而递归Promise是异步完成后再触发下一次执行，完美匹配你的需求。

进阶优化：封装成通用函数 #

如果经常需要分页拉取，可以把逻辑封装成通用函数，复用性更强：

function fetchAllPages(fetchPageFn, exitConditionFn) {
  const result = [];
  let currentPage = 1;
  
  function fetchNext() {
    return fetchPageFn(currentPage)
      .then(data => {
        result.push(...data.list); // 假设接口返回的列表字段是list
        if (exitConditionFn(data, currentPage)) {
          return result;
        } else {
          currentPage++;
          return fetchNext();
        }
      });
  }
  
  return fetchNext();
}

// 使用示例：
fetchAllPages(
  (page) => fetch(`/api/data?page=${page}`).then(res => res.json()),
  (data, page) => data.meta.isLastPage // 退出条件：是否是最后一页
)
.then(allData => console.log('所有数据：', allData));

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