Callback javascript ajax
Здравствуйте, есть два запроса которые получают данные. использую XMLHttpRequest. Несмотря на то, что AJAX является асинхронной операцией, результаты запросов я хочу получить последовательно: сначала трёх пользователей, потом случайное число. Для этого пытаюсь использовать callback-и. Может ли объяснить мне как с ними работать?
window.onload = function () {
document.querySelector("#callback").onclick = function () {
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
ajaxGet(3, url + 3, getName);
ajaxGet(n, url + n, getName);
}
}
function getName(s, request) {
let data = JSON.parse(request.responseText);
for (let i in data.results) {
document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
}
}
function ajaxGet(s, url, callback) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(s, this);
}
}
request.open('GET', url);
request.send();
}
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
|
Но я на нативном JS пишу. додумался только до этого, но правильно ли?
window.onload = function () {
document.querySelector("#callback").onclick = function () {
const url = "https://randomuser.me/api?results=";
ajaxGet(3, url + 3, getName);
}
}
function getName(s, request) {
let data = JSON.parse(request.responseText);
for (let i in data.results) {
document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
}
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
let dataq = JSON.parse(request.responseText);
for (let i in dataq.results) {
document.getElementById("name").innerHTML += "rand" + " " + dataq.results[i].name.first + " " + dataq.results[i].name.last + "<br>";
}
}
}
request.open('GET', url + n);
request.send();
}
function ajaxGet(s, url, callback) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(s, this);
}
}
request.open('GET', url);
request.send();
}
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
|
ой, извиняюсь, засиделся и не обратил внимание на тему :cray:
Цитата:
function getName(s, request) {
let data = JSON.parse(request.responseText);
for (let i in data.results) {
document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
}
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
let dataq = JSON.parse(request.responseText);
for (let i in dataq.results) {
document.getElementById("name").innerHTML += "rand" + " " + dataq.results[i].name.first + " " + dataq.results[i].name.last + "<br>";
}
}
}
request.open('GET', url + n);
request.send();
}
|
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function () {
document.querySelector("#callback").onclick = async function () {
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
getName(...await ajaxGet(3, url + 3));
getName(...await ajaxGet(n, url + n));
}
}
function getName(s, request) {
let data = JSON.parse(request.responseText);
for (let { name: { first, last } } of Object.values(data.results)) {
document.getElementById("name").innerHTML += s + " " + first + " " + last + "<br>";
}
}
function ajaxGet(s, url) {
return new Promise(function(resolve) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
resolve([s, this]);
}
}
request.open('GET', url);
request.send();
});
}
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
</script>
<button id="callback">Button</button>
<div id="name"></div>
</body>
</html>
|
Спасибо, разобрался благодаря вам, извиняюсь за дублирование темы :)
|
Спасибо) Вы реализовали решение я так понимаю при помощи async/await?
|
Да
/// я ещё немного потрансформировал Ваш код:-? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="callback">Button</button>
<div id="name"></div>
<script>
document.querySelector("#callback").onclick = async function () {
const url = "https://randomuser.me/api?results=";
let n = randomInteger(5, 10);
await getPersons(3, url).then(addPerson);
await getPersons(n, url).then(addPerson);
}
function addPerson([s, data]) {
for(let { name: { first, last } } of Object.values(data.results)) {
document.getElementById("name").innerHTML += `${s} ${first} ${last}<br>`;
}
}
function getPersons(s, url) {
return fetch(url + s)
.then(response => response.json())
.then(data => [s, data]);
}
function randomInteger(min, max) {
return Math.floor(min + Math.random() * (max - min));
}
</script>
</body>
</html>
|
Спасибо) буду разбираться)
|
| Часовой пояс GMT +3, время: 08:51. |