jquery - 使用 API 加载更多 GitHub 用户关注者

Question

我正在使用 GitHub API 并尝试构建一个简单的应用程序，让您可以搜索 GitHub 用户，然后返回该用户的关注者列表。我目前正在显示前 100 个关注者，并希望单击每个按钮来加载下一批 100 个关注者，直到返回所有关注者。

由于我正在加载每个页面上显示的最大计数 (100)，因此我可以通过在网址末尾添加“&page=2”来访问第二页。我只是不知道如何自动加载每个新页面，直到没有更多的关注者可以加载。

关于如何实现这一目标有什么建议吗？非常感谢任何帮助。

// Make request to Github
$.ajax({
  url:'https://api.github.com/users/'+username,
  data:{
    client_id:'9ecc0f206ecd34f2f552',
    client_secret:'6eee17df91630a531ea2acf49848dec408079e9c'
  }
}).done(function(user){
  $.ajax({
    url:'https://api.github.com/users/'+username+'/followers?per_page=100',
    data:{
      client_id:'9ecc0f206ecd34f2f552',
      client_secret:'6eee17df91630a531ea2acf49848dec408079e9c'
    }
  }).done(function(followers){
    $.each(followers, function(index, follower){
      $('#followers').append(`
        <div>
          <div class="row">
            <div class="col-md-10">
            <img class="follower-avatar" src="${follower.avatar_url}" alt="" />
            <p>${follower.login}</p>
            </div>
            <div class="col-md-2">
              <a href="${follower.html_url}" target="_blank" class="btn">View profile</a>
            </div>
          </div>
        </div>
      `);
    });
  });
  $('#profile').html(`
    <div>
      <div>
        <div class="row">
          <div class="col-md-3">
            <img  src="${user.avatar_url}">
            <div>
                <h3>${user.name}</h3>
            </div>
            <a target="_blank" class="btn" href="${user.html_url}">View Profile</a>
          </div>
          <div class="col-md-9">
          <div>
            <h1>Followers</h1> <br/>
            <p>${user.followers}</p>
          </div>
          <div>
            <h1>Followers</h1> <br/>
            <p>2313123</p>
          </div>
          </div>
        </div>
      </div>
    </div>
    <h3 class="page-header">${user.name}'s followers</h3>
    <div id="followers"></div>
  `);
});

Answer 1

通过使用递归函数，我们可以继续请求更多关注者页面。

我将您的一些代码移至下面名为 getFollowers 的函数中，该函数接受page 编号作为参数。它最初是在页面为 1 时调用的，如果我们注意到 AJAX 结果的行数与我们每页请求的用户数相同(即我们的 per_page 为 100 并且第 1 页有 100 个用户)，值得检查一下是否有下一页。

然后，以 page 递增 1 的方式递归调用该函数。这将继续运行，直到加载所有页面(或者超出您的 API 速率限制!)。

如果您有任何疑问，请告诉我。

(出于演示目的，我随机找到了一个具有中等数量关注者的 GitHub 用户。)

编辑:根据您的评论和最初的请求，我更新了下面的代码，要求单击按钮才能加载下一页。

var username = 'cartazio';
var nextPage;

// bind click event for button
$('#load').on('click', function() {
  getFollowers(nextPage);
});

// getFollowers function with one parameter - current page
function getFollowers(page) {

  // how many followers per page to retrieve
  perPage = 100;

  // update next page global variable
  nextPage = page + 1;

  $.ajax({
    url: 'https://api.github.com/users/' + username + '/followers?per_page=' + perPage + '&page=' + page,
    data: {
      client_id: '9ecc0f206ecd34f2f552',
      client_secret: '6eee17df91630a531ea2acf49848dec408079e9c'
    }
  }).done(function(followers) {
    $.each(followers, function(index, follower) {
      $('#followers').append(`
            <div>
              <div class="row">
                <div class="col-md-10">
                <img class="follower-avatar" src="${follower.avatar_url}" alt="" />
                <p>${follower.login}</p>
                </div>
                <div class="col-md-2">
                  <a href="${follower.html_url}" target="_blank" class="btn">View profile</a>
                </div>
              </div>
            </div>
          `);
    });

    // if the array returned has fewer people than we requested per page,
    // we've found all the followers. hide the button
    if (followers.length < perPage) {
      $('button').hide();
    }
  });
}

// Make request to Github
$.ajax({
  url: 'https://api.github.com/users/' + username,
  data: {
    client_id: '9ecc0f206ecd34f2f552',
    client_secret: '6eee17df91630a531ea2acf49848dec408079e9c'
  }
}).done(function(user) {
  // Get first page of followers
  getFollowers(1);
  // Profile HTML
  $('#profile').html(`
        <div>
          <div>
            <div class="row">
              <div class="col-md-3">
                <img  src="${user.avatar_url}">
                <div>
            		<h3>${user.name}</h3>
          		</div>
                <a target="_blank" class="btn" href="${user.html_url}">View Profile</a>
              </div>
              <div class="col-md-9">
              <div>
              	<h1>Followers</h1> <br/>
              	<p>${user.followers}</p>
              </div>
              <div>
              	<h1>Followers</h1> <br/>
              	<p>2313123</p>
              </div>
              </div>
            </div>
          </div>
        </div>
        <h3 class="page-header">${user.name}'s followers</h3>
        <div id="followers"></div>
      `);
});

#followers {
  counter-reset: users;
}

.col-md-10::before {
  counter-increment: users;
  content: counter(users);
  display: inline-block;
  width: 50px;
}

img {
  width: 40px;
}

p {
  display: inline-block;
  margin: 0 1em;
  width: 200px;
}

.row div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="followers"></div>
<button id="load">Load More</button>
<div id="profile"></div>