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

Question

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

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

有关如何完成此任务的任何建议？非常感谢任何帮助。

// 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>