在Javascript中处理分页API的最佳方法是什么？

我试图使用一个返回下面结构的API

{
  data: [{...},{...},{...},{...},...],
  nextUrl: "url_goes_here";
}

当nextUrl为null时，页面结束。我希望在遍历分页响应时将数据中的所有元素收集到一个数组中。我尝试了以下代码段

const getUserData=async（url）=>{
const result=等待获取（url）
.then（res=>res.json（））
。然后（res=>{
dataList=[…dataList，…res.data]；
console.log（res.data）
如果（res.nextUrl！==null）{
getUserData（res.nextur）；
}否则{
console.log（“else”，数据列表）；
}
})
.catch（err=>{}）；
返回结果；
}

您使用递归的方法一点也不差，但是您没有返回数据块（第二个

处理程序没有返回值）。（您还陷入了未检查
ok
的
fetch
陷阱。这是
fetch
API设计中的一个缺陷。）

不过，不需要递归。我很想使用一个循环：

const getUserData = async (url) => {
    const result = [];
    while (url) {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        const {data, nextUrl} = await response.json();
        result.push(...data);
        url = nextUrl;
    }
    return result;
};

但如果要使用递归：

const getUserData = async (url) => {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    const {data, nextUrl} = await response.json();
    if (nextUrl) {
        data.push(...await getUserData(nextUrl));
    }
    return data;
};

或

const getUserData = async (url, result = null) => {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    const {data, nextUrl} = await response.json();
    if (!result) {
        result = data;
    } else {
        result.push(...data);
    }
    if (nextUrl) {
        result = await getUserData(nextUrl, result);
    }
    return result;
};