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運行此函數，它將返回正確的值。