如何使用Fetch API直接获取有限数量的API条目？

开发者阿泽

2026-8-18

如何直接从API查询有限数量的条目（替代客户端slice截取）

当然可以不用先加载全部数据再在客户端截取，很多API（包括你使用的GitHub用户列表API）都支持通过查询参数直接限制返回结果的数量，从服务端就只返回你需要的条目。

针对GitHub API的解决方案

GitHub的用户列表API支持per_page参数，用来指定每页返回的条目数量。你只需要在请求URL后添加这个参数，就能直接获取前N条数据：

getDataBtn = document.getElementById("getData");
box = document.getElementById("container")

getDataBtn.addEventListener("click", getData);

function getData(){
    // 添加per_page=5参数，直接请求前5条数据
    const url = "https://api.github.com/users?per_page=5";
    fetch(url).then((response)=>{
        return response.json();
    }).then((data)=>{
        // 现在data已经是前5条，无需再slice
        const myArray = data.map((item)=>{
            const x = { ID : item.id , Username : item.login , Github_URL : item.html_url } ;
            return x; // 原代码里的return res是笔误，应该返回x
        })
        box.innerHTML = JSON.stringify(myArray);
    })
}