javascript - 如何重构 api 或使这段代码更简单？

Question

我正在学习ajax json，我只是在测试如何提取数据，所以当悬停数字时，它会提取数据并显示名称和电子邮件的内容。数字 1 是显示姓名，数字 2 是显示电子邮件。

该 api 正在工作，但我不太确定如何重构或使代码更简单。

现在我只是将代码从一个复制到另一个，我尝试添加回调函数，但我觉得我做错了，

如何在不复制代码的情况下重构或简化我的代码？

const button = document.querySelector(".testName");
const buttonTest = document.querySelector(".testLastName");

const wrapper = document.querySelector(".wrapper");

const randomPerson = document.querySelector("random-person");



button.addEventListener("mouseover", function () {
    getData("https://randomuser.me/api/");
    console.log("first name");
})

buttonTest.addEventListener("mouseover", function () {
    getDataTest("https://randomuser.me/api/");
    console.log("last name");
})

function getData(url) {
    const request = new XMLHttpRequest();

    request.open("GET", url, true);
    //console.log(request);

    request.onload = function () {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            console.log(data);

            let display = "";

            data.results.forEach(function (person) {
                display += `
                    <div class="person">
                        <img class="random-image-js" src=${person.picture.large}></img>
                        <div class="person-category">
                            <p>Name: <br> ${person.name.first}</p>
                        </div>
                        
                        
                    </div>`
            });

   

            wrapper.innerHTML = display;

        }
        else {
            console.log(this.statusText);
        }
    }

    request.onerror = function () {
        console.log("There was a mistake");
    }

    request.send();
}

function getDataTest(url) {
    const request = new XMLHttpRequest();

    request.open("GET", url, true);
    //console.log(request);

    request.onload = function () {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            console.log(data);

            let display = "";

            data.results.forEach(function (person) {
                display += `
                    <div class="person">
                        <img class="random-image-js" src=${person.picture.large}></img>
                        <div class="person-category">
                            <p>Email: <br> ${person.email}</p>
                        </div>
                    </div>`
            });

            wrapper.innerHTML = display;

        }
        else {
            console.log(this.statusText);
        }
    }

    request.onerror = function () {
        console.log("There was a mistake");
    }

    request.send();
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.random-wrapper {
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.random-image-js {
  width: 150px;
  border-radius: 50%;
}

.random-button:focus {
  outline: none;
}

.wrapper {
  border: 1px solid green;
  width: 100%;
  margin-top: 50px;
}

.person {
  width: 1000px;
  border: 1px solid green;
  margin: auto;
  text-align: center;
}

.person-category {
  display: flex;
  justify-content: center;
}

.person-category p {
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.test {
  display: flex;
}

.test p {
  padding: 20px;
  border: 1px solid green;
}

<div class="random-wrapper">
  <div class="wrapper"></div>

  <div class="test">
       <p class="testName">1</p>
       <p class="testLastName">2</p>
  </div>
</div>

标签： javascriptjsonajaxapirefactoring