axios实现分页查询

原创

mob64ca12e676c8 2025-01-28 12:42:47 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e676c8的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Axios 实现分页查询的完整指南

在现代前端开发中，后端接口返回的数据量常常很大，因此必须使用分页来高效地展示数据。本文将带您了解如何使用 Axios 来实现分页查询，适合刚入行的小白。

整体流程

下面是实现 Axios 分页查询的步骤流程：

步骤	说明
1	安装 Axios 库
2	发送带有分页参数的 API 请求
3	获取并处理服务器返回的数据
4	实现分页按钮以便用户选择不同的页面
5	使用状态管理（如 React Hooks）来维护当前页码
6	测试分页功能

第一步：安装 Axios 库

在项目中使用 Axios 之前，首先需要安装它。您可以使用 npm 或 yarn 来安装。

npm install axios

或者：

yarn add axios

注释: 此命令将 Axios 库添加到项目的依赖中，以便后续代码中使用。

第二步：发送 API 请求

在您发送请求之前，首先需要了解 API 的分页参数。通常会包括 page 和 limit（每页条数）。

例如，我们假设 API 地址为 `

import axios from 'axios';

const fetchItems = async (page, limit) => {
    try {
        const response = await axios.get(' {
            params: {
                page: page,    // 当前页码
                limit: limit   // 每页显示的条数
            }
        });
        return response.data; // 返回 API 返回的数据
    } catch (error) {
        console.error('Error fetching data:', error); // 处理错误
        return null; // 如果发生错误，返回 null
    }
};

注释:

axios.get 用于发起 GET 请求，并将分页参数传递给服务器。
response.data 是服务器返回的实际数据。

第三步：获取并处理数据

我们需要处理从 API 获得的数据，通常我们会将其存储在状态变量中以便后续使用。

import React, { useEffect, useState } from 'react';

const ItemsList = () => {
    const [items, setItems] = useState([]); // 用于存储获取的条目
    const [page, setPage] = useState(1); // 当前页码
    const [totalPages, setTotalPages] = useState(0); // 总页数

    useEffect(() => {
        const loadData = async () => {
            const data = await fetchItems(page, 10); // 每页显示10条
            if (data) {
                setItems(data.items);
                setTotalPages(data.totalPages); // 假设服务器返回了 totalPages
            }
        };
        loadData();
    }, [page]); // 当页面更新时，重新加载数据

    return (
        <div>
            Items List
            <ul>
                {items.map(item => (
                    <li key={item.id}>{item.name}</li> // 渲染条目列表
                ))}
            </ul>
            {/* 更多内容将放在这里 */}
        </div>
    );
};

注释:

使用 useEffect 钩子在组件挂载或 page 改变时加载数据。
setItems 和 setTotalPages 用于更新状态以存储获取的条目与总页数。

第四步：实现分页按钮

现在我们需要创建分页按钮以允许用户选择不同的页面。

const handlePageChange = (newPage) => {
    setPage(newPage); // 改变当前页码
};

return (
    <div>
        Items List
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
        <div>
            {/* 渲染分页按钮 */}
            {Array.from({ length: totalPages }, (_, index) => (
                <button
                    key={index + 1}
                    onClick={() => handlePageChange(index + 1)}
                    disabled={index + 1 === page} // 当前页禁用按钮
                >
                    {index + 1}
                </button>
            ))}
        </div>
    </div>
);

注释:

使用 Array.from 生成页码按钮。
disabled 属性确保当前页的按钮不可点击。

第五步：使用状态管理

在大型项目中，可能需要使用状态管理工具来管理分页状态。但是在我们的示例中，我们使用了 React 的 Hooks 来管理状态。

第六步：测试分页功能

最后一步，您需要测试分页功能，确保在点击分页按钮时，数据正确更新并显示。

运行开发服务器，确保没有错误出现，并进行交互测试。
检查 API 请求是否正确发送并且返回的数据是否准确。

npm start

注释: 此步骤确保您在开发环境中运行代码并进行验证。

journey
    title 使用 Axios 实现分页查询
    section 安装 Axios 库
      安装 npm install axios: 5: 开发者
    section 发送 API 请求
      发送请求 fetchItems(): 5: 开发者
    section 获取并处理数据
      处理数据 setItems(data.items): 5: 开发者
    section 实现分页按钮
      创建按钮 render pagination buttons: 5: 开发者
    section 使用状态管理
      管理状态 useState(): 5: 开发者
    section 测试分页功能
      运行测试 npm start: 5: 开发者