Question

我正在使用github api在网页上显示用户信息和存储库。

<body>
    <section id='input'>
        <h1>Github Repository Obtainer</h1>
        <input type="text", id="input-text", placeholder="Enter a Github username">
        <button id="submit-button">Search</button>
    </section>
    <hr>
    <section id="main">
        <ul id="tag">
            <li class="tag-item">User Info</li>
            <li class="tag-item">User Repository</li>
        </ul>
        <hr>
        <section id="user">
            
        </section>
        <section id="repo">
        <ul id="repository-list">

        </ul></section>
    </section>
    <script src="index.js"></script>
</body>
</html>

button = document.getElementById("submit-button");

button.addEventListener("click", () => {
    const user = document.getElementById("input-text").value;
    const xmr = new XMLHttpRequest();
    xmr.open("GET", `https://api.github.com/users/${user}/repos`, true);

    xmr.onload = () => {
        let list = document.getElementById("repository-list")
        if(this.status === 200){
            console.log(this.status)
            const data = JSON.parse(this.responseText);
            var output = '';
            data.forEach((item, index) => {
                let tempChild = document.createElement("li")
                tempChild.setAttribute("id", "list-item")
                output += `<ul>
                                <li><span>Name:</span> ${item.name}</li>
                                <li><span>Description:</span> ${item.description}</li>
                                <li><span>URL:</span><a href = "${item.html_url}" target="_blank"> ${item.html_url}</a></li>
                            </ul>`
                tempChild.innerHTML = output
                list.appendChild(tempChild)
            })
        } else {
            list.innerHTML = "<h1>User cannot be found</h1>"
        }
    }
    xmr.send();

    const xmr2 = new XMLHttpRequest();
    xmr2.open("GET", `https://api.github.com/users/${user}`, true);
    xmr2.onload =() => {
        if(this.status === 200){
            const data2 = JSON.parse(this.responseText);
            var output = '';
            output += `<h1>${data2.login}</h1>
                       <img src="${data2.avatar_url}">
                       <ul id="user-info-list">
                            <li><span>Bio: </span>${data2.bio}</li>
                            <li><span>Public Repositories: </span>${data2.public_repos}</li>
                            <li><span>Public Gists: </span>${data2.public_gists}</li>
                            <li><span>Followers: </span>${data2.followers}</li>
                            <li><span>Following: </span>${data2.following}</li>
                            <li><span>Location: </span>${data2.location}</li>
                            <li><span>Created on: </span>${data2.created_at.slice(0, 10)}</li>
                            <li><span>URL: </span><a href="${data2.html_url}">${data2.html_url}</a></li>
                       <ul>`

            } else{
                var output = "<h1>User does not exist</h1>"
            }
        document.getElementById("user").innerHTML = output
    }
    xmr2.send()
    tabChecker();
})

tabChecker（）是js文件中的另一个函数，在此未包括。这不是引起问题的原因。即使该用户存在于github上，也始终找不到该用户的输出。请提供可能出现问题的答案。同样，当我console.log(this.status)时，控制台中的输出为空白。当我将链接放在浏览器中时，api的链接可以正常工作

Answer 1

您应该使用xmr2.status而不是this.status，或者不要使用箭头功能：xmr2.onload = function() {...}。箭头函数没有自己的this。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

为什么我没有得到200的状态码？

1 个答案: