Форум

ar4ipers · #1 (**permalink**) 23.04.2018, 21:59

Здравствуйте, есть два запроса которые получают данные. использую 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;
}

ar4ipers · #2 (**permalink**) 23.04.2018, 22:08

Но я на нативном 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;
}

ar4ipers · #3 (**permalink**) 23.04.2018, 22:40

ой, извиняюсь, засиделся и не обратил внимание на тему

Цитата:

У вас есть функции, зачем вы копируете их содержимое.

Вы про это?

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();
}

Malleys · #4 (**permalink**) 24.04.2018, 00:01

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

ar4ipers · #5 (**permalink**) 24.04.2018, 00:07

Спасибо, разобрался благодаря вам, извиняюсь за дублирование темы

ar4ipers · #6 (**permalink**) 24.04.2018, 00:09

Спасибо) Вы реализовали решение я так понимаю при помощи async/await?

Malleys · #7 (**permalink**) 24.04.2018, 00:17

Да

/// я ещё немного потрансформировал Ваш код

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

ar4ipers · #8 (**permalink**) 24.04.2018, 09:49

Спасибо) буду разбираться)

Форум

Справочник

Discord чат

Курсы javascript