如何在 React 中使用 Axios 一次性获取 API 的全部分页数据-js教程-PHP中文网

如何在 React 中使用 Axios 一次性获取 API 的全部分页数据

本文介绍如何通过递归式请求和状态驱动的 useeffect 实现自动遍历多页 api 数据，避免手动翻页，确保一次性加载全部结果（如 13 条数据分 2 页返回）。

本文介绍如何通过递归式请求和状态驱动的 useeffect 实现自动遍历多页 api 数据，避免手动翻页，确保一次性加载全部结果（如 13 条数据分 2 页返回）。

在 React 应用中调用分页 API（如 Laravel Sanctum 或 Laravel API Resource 分页响应）时，单次 axios.get('/jobs') 仅返回第一页数据（例如 10 条），而真实数据可能分布在多页中（如 total: 13, last_page: 2）。要一次性获取全部数据，不能依赖静态页码循环（如 for (let i = 1; i 响应驱动的链式请求策略：利用 API 返回的 next_page_url 动态发起下一页请求，直到该字段为 null。

✅ 核心实现思路

使用两个状态变量：data 存储累积结果，nextPageUrl 控制请求流程；
将 nextPageUrl 设为 useEffect 的依赖项，每次更新后自动触发新请求；
每次成功响应后，将新数据合并进 data，并更新 nextPageUrl 为 response.data.next_page_url；
当 nextPageUrl 为 null 或 undefined 时，请求自然终止。

? 完整代码示例

import React, { useState, useEffect } from 'react';
import { getJobsByURL } from '../service/jobs'; // 修改后的服务函数

const MyTable = () => {
  const [data, setData] = useState<any>([]);
  const [nextPageUrl, setNextPageUrl] = useState<string null>(
    'http://api/api/v1/jobs?page=1'
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string null>(null);

  useEffect(() => {
    if (!nextPageUrl) {
      setLoading(false);
      return;
    }

    getJobsByURL(nextPageUrl)
      .then((response) => {
        const newData = response.data.data.data || [];
        setData((prev) => [...prev, ...newData]);

        // 关键：从响应中提取下一页 URL（注意字段路径！）
        const nextUrl = response.data.next_page_url;
        setNextPageUrl(nextUrl);
      })
      .catch((e) => {
        console.error('Failed to fetch jobs:', e);
        setError('Failed to load job data');
        setLoading(false);
      });
  }, [nextPageUrl]); // ⚠️ 严格依赖 nextPageUrl，形成链式触发

  // 可选：加载状态提示
  if (loading && data.length === 0) return <div>Loading all jobs...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {data.map((d, key) => (
        <div key="{key}" classname="d-flex" style="{{" margin:>
          <h3>{d.id}</h3>
          <span style="{{" marginleft:>{d.job_title}</span>
        </div>
      ))}
      {data.length > 0 && (
        <p><strong>Total loaded:</strong> {data.length} jobs</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1886" title="React Native For Android 源码编译 中文WORD版"><img
														src="https://img.php.cn/upload/manual/000/000/007/170907841096000.png" alt="React Native For Android 源码编译 中文WORD版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/shouce/1886" title="React Native For Android 源码编译 中文WORD版" class="overflowclass">React Native For Android 源码编译 中文WORD版</a>
													<p class="overflowclass">本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看</p>
												</div>
												<a rel="nofollow" href="/xiazai/shouce/1886" title="React Native For Android 源码编译 中文WORD版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      )}
    </div>
  );
};

export default MyTable;</string></string></any>

对应的服务层需支持传入 URL：

// service/jobs.ts
export function getJobsByURL(url: string) {
  return axiosClient.get(url);
}

⚠️ 关键注意事项

字段路径校验：不同后端分页结构不同。本例中 response.data.next_page_url 来自 Laravel 分页响应；若你的 API 返回 response.data.links.next，请相应调整。
防重复请求：确保 nextPageUrl 更新逻辑无误，避免因 undefined / '' 导致无限请求（建议显式判断 if (nextUrl)）。
错误中断处理：任一页面请求失败应停止后续请求（当前示例中 catch 后设 setLoading(false) 并报错）。
性能权衡：对海量数据（如 > 1000 条），建议改用滚动加载或后端提供 ?all=1 参数，避免前端串行请求阻塞渲染。
取消请求（进阶）：可结合 AbortController 在组件卸载时取消未完成请求，防止状态更新警告。