Question

我正在尝试构建一个简单的工具，当您搜索某人的用户名时，该工具将返回Github配置文件。一切似乎都有效，除非我搜索其他用户时，上一个用户搜索中的关注者列表不会清除。

例如，拥有七个粉丝的用户会突然显示数十个粉丝。

有人能告诉我在获取不同的Github个人资料时如何显示每个用户唯一的正确关注者数量吗？

var response = null;
var followers = null;

document.getElementsByTagName('button')[0].addEventListener('click', function(r) {
  getUser(document.getElementsByTagName('input')[0].value);
});

function getUser(name) {
    fetch('https://api.github.com/users/' + name)
    .then(function(r) {
        console.log(r.status);
        return r.json();
    })
    .then(function(j) {
        response = j;
        assignValues();
        getFollowers(j.followers_url);
    });
}

function assignValues() {
    document.getElementById('loader').style = 'display: none';

    document.getElementById('avatar').src = response.avatar_url;
    document.getElementById('name').innerText = response.name;
    document.getElementById('username').innerText = response.login;
    document.getElementById('location').innerText = response.location;
    document.getElementById('bio').innerText = response.bio;
    document.getElementById('count').innerText = 'Followers: ' + response.followers;
}

function getFollowers(url) {
    fetch(url)
    .then(function(r) {
        return r.json();
    })
    .then(function(f) {
        followers = f;
        listFollowers();
    });
}

function listFollowers() {
    followers.forEach(function(f) {
        var li = document.createElement('li');
        li.innerHTML = '<a href="' + f.html_url + '">'+ '<img src="' + f.avatar_url + '" alt="' + f.login + '"/>'+ '</a>';
        document.getElementById('list').appendChild(li);
    });
}

Answer 1

在开始向其添加新关注者之前，您需要清除#list函数中的listFollowers元素。例如：

var list = document.getElementById('list');
list.innerHTML = '';
followers.forEach(function(f) {
    var li = document.createElement('li');
    li.innerHTML = '<a href="' + f.html_url + '">'+ '<img src="' + f.avatar_url + '" alt="' + f.login + '"/>'+ '</a>';
    list.appendChild(li);
});

这里有三个旁注：

为什么在将这些变量作为参数传递时，在渲染函数中使用全局变量response和followers？
当您重新呈现“用户个人资料”时首先，然后等待化身＆＃39;获取时，用户在查找用户Y时仍然可以看到用户X的关注者。在用户使用之后立即清除该部分（并显示加载数据的一些视觉提示）会更好。切换。
由于fetch响应的顺序无法保证，此处存在潜在的竞争条件：如果用户点击该按钮两次（使用不同的输入），之前的输入可能会在稍后返回 - 并覆盖前者。您需要通过存储最新的输入值和检查响应，或通过其他方式来防范这种情况。

您可以通过人为地限制网络速度来测试它们。相信我，在现实世界中，大多数用户都会遇到各种各样的问题。

清除以前用户搜索Github API的关注者

1 个答案: