Axios REST api 客户端分页

Question

我有问题。我在烧瓶应用程序中有一个休息 api。应用程序连接到存储 10k 用户的数据库。我需要做一些类似分页的事情。例如，我想获取：100 个用户的列表，从 1 到 100，然后获取到下一页的 URL，用户从 101 到 200 等。我提出了这样的 axios 请求：

document.getElementById('showUserInputForm').addEventListener('submit', performGetRequest1);
function performGetRequest1(){
  var start = document.getElementById('starting').value;
  var limit = document.getElementById('limit').value;
  var resultElement = document.getElementById('getResult1');
  resultElement.innerHTML = '';

  axios.get('http://127.0.0.1:5000/users/page', {
    params: {
      start:start,
      limit:limit
    }
  })
    .then(function (response) {
     resultElement.innerHTML = generateSuccessHTMLOutput(response);
    })
    .catch(function (error) {
     resultElement.innerHTML = generateErrorHTMLOutput(error);
    });
}

此代码返回 json：

{
    "limit": 100,
    "next": "users/page?start=200&limit=100",
    "previous": "users/page?start=1&limit=99",
    "results": [
        {
{
        "id": 101,
        "password": "hicqjjzxftvq",
        "username": "jclkoxgwgvvw"
    },
    {
         "id": 100,
         "password": "xtitexyetpwg",
         "username": "uwerzuwnxkju"
    },

我如何使用这些下一个/上一个链接来制作 按钮？或者任何想法如何制作它？

Answer 1

后端实际上返回可用于下一页/上一页的端点。

你可以这样做：

let nextUrl = null;
let previousUrl = null;
url = 'http://127.0.0.1:5000/users/page';

function performGetRequest1(url){
  var start = document.getElementById('starting').value;
  var limit = document.getElementById('limit').value;
  var resultElement = document.getElementById('getResult1');
  resultElement.innerHTML = '';

  axios.get(url)
    .then(function (response) {
     resultElement.innerHTML = generateSuccessHTMLOutput(response);
     nextUrl = 'http://127.0.0.1:5000/' + response.next;
     previousUrl = 'http://127.0.0.1:5000/' + response.previous;
    })
    .catch(function (error) {
     resultElement.innerHTML = generateErrorHTMLOutput(error);
    });
}

如果您使用nextUrl 或previousUrl 运行此函数，它应该返回正确的值。