JavaScript 如何基于Promise实现API分页循环请求

你现有写法只支持单次请求，遇到接口返回has_more: true、需要携带next_offset拉取后续分页的场景，之前在.then回调里硬写递归却不生效，核心原因是没有把递归产生的后续Promise链透传给最外层，导致外层调用永远拿不到全量数据。
最适配你现有代码结构的方案是带内部状态的Promise递归调用，既可以保持对外的函数入参完全不变，也能自动完成循环拉取直到接口告知没有更多数据。

核心实现逻辑 #

• 把分页需要追踪的offset偏移量、累计的已拉取数据作为函数的内部默认参数，对外完全透明，不需要调用方传入
• 每次接口返回后，先按原有逻辑处理当前页的业务数据，再判断has_more标记：
  • 如果标记为true，就带着接口返回的next_offset值递归发起下一次请求，同时把当前已拿到的数据和后续请求的结果做拼接
  • 如果标记为false，就终止递归，把累计的全量数据作为最终结果返回
• 把错误捕获统一放在递归的最外层Promise链上，避免重复绑定错误处理逻辑造成的冗余

参考实现代码 #

function handleError(err) {
    // 完全保留你原有的错误处理逻辑即可
    console.error('API请求处理失败', err)
}

function getPostsFromAPI(argOne, argTwo, currentOffset = 0, accumulatedPosts = []) {
    const baseUrl = `https://www.exampleapi.com/v1/userposts`
    // 用URL对象拼接参数，避免字符串拼接的格式问题
    const requestUrl = new URL(baseUrl)
    requestUrl.searchParams.set('name', argOne)
    requestUrl.searchParams.set('something', argTwo)
    requestUrl.searchParams.set('offset', currentOffset)

    // 关键：把递归产生的Promise直接return，完整透传给外层调用
    return apiGet(requestUrl.toString())
        .then(originalResponse => {
            // 保留你原有的单页数据处理逻辑
            const processedSinglePage = originalResponse.data
            const fullCollectedPosts = [...accumulatedPosts, ...processedSinglePage]

            // 判断是否需要继续拉取下一页
            if (originalResponse.has_more === true) {
                // 递归调用时传入新的offset和已累计的全量数据
                return getPostsFromAPI(argOne, argTwo, originalResponse.next_offset, fullCollectedPosts)
            }

            // 接口提示没有更多数据，直接返回全量结果
            return fullCollectedPosts
        })
        .catch(handleError)
}

实际使用说明 #

• 对外调用的方式和你原来的函数完全一致，不需要额外传参数：

  // 直接调用即可，函数内部会自动循环拉取所有分页数据
  getPostsFromAPI('示例用户名', '匹配查询条件')
    .then(allPostList => {
        // 这里拿到的是全部分页拉完后的完整帖子数组
    })
  

• 你可以非常方便地加自定义的请求次数上限：只需要在函数参数里加一个计数用的默认值，每次递归时自增计数，超过你设定的阈值就直接终止递归返回已有数据，完全不需要改动整体流程
• 这种写法完全兼容你现有的Promise风格的apiGet封装，不需要额外引入async/await语法做改造，也不会出现分页拉取顺序错乱的问题

之前递归写法失效的常见坑：在.then回调里没有return内部递归调用的Promise，导致递归产生的后续请求结果被封闭在内部回调作用域里，外层永远等不到全量数据。只要保证每一层的递归调用结果都被return到当前的Promise链上，整个流程就能顺畅衔接。

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