Axios REST API客户端分页

Question

我有个问题。 我在烧瓶应用程序中有一个REST API。 应用程序已连接到存储10k用户的数据库。 我需要做类似分页的事情。 我想得到例如：100个用户的列表，从1到100，然后从101到200的用户获取到下一页的URL，等等。我发出了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运行此函数，它将返回正确的值。