时间戳

首页 > 解决方案 > 在 Javascript 中处理分页 API 的最佳方法是什么？

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

问题描述

我正在尝试使用返回以下结构的 API。

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

当 nextUrl 为空时页面结束。我想在浏览分页响应时将数据中的所有元素收集到一个数组中。我尝试了以下代码段。

const getUserData = async (url) => {
    const result = await fetch(url)
    .then(res => res.json())
    .then(res => {
        dataList= [...dataList, ...res.data];
        console.log(res.data)
        if (res.nextUrl !== null) {
          getUserData(res.nextUrl);
        } else {
          console.log("else ", dataList);
        }
    })
    .catch(err => {});
  return result;
}

console.log 可以打印结果。但我想将所有数据放入一个变量中，以便以后进行进一步处理。

标签： javascriptapiasynchronousasync-await

解决方案

您使用递归的方法一点也不差，但是您没有返回数据块（第二个.then处理程序没有返回值）。（您也陷入了fetch不检查的陷阱。恕我直言，这是API 设计ok中的一个缺陷。）fetch

虽然不需要递归。我很想只使用一个循环：

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;
};

推荐阅读