alex-1917
@alex-1917
Если ответ помог, отметь решением

Как правильнее выгружать данные из API через XMLHttpRequest?

Правильно ли так вызывать функцию showProduct() внутри аджакс-запроса и уже внутри этой функции добавлять элемент в DOM?
Или надо разбить на две-три функции? Тогда не обойтись без Promise?
var app = document.getElementById('app');
function getProduct(id) {
	var formData = new FormData();
	formData.append('product_id', id);
	var request = new XMLHttpRequest();
	request.responseType =	"json";
	request.open('POST', '/api.php', true);
	request.addEventListener('readystatechange', function() {
		if (this.readyState == 4 && this.status == 200) {
			var item = this.response;
			showProduct(item);
		}
	});
	request.send(formData);
}
function showProduct(item) {
	var product = document.createElement('a');
	product .href = 'product/' + item.href;
	product .textContent = item.name;
	product .addEventListener('click', product_rout);//функция роутинга, не
	app.appendChild(product );
}
function product_rout {
...
}
//и сам вызов функции, вызывается по клику на карточку товара в списке товаров
getProduct(id);
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
melodyn
@melodyn
Лучше нативная смерть, чем фреймворковая жизнь.
1. XMLHttpRequest, как и var - это немного сильно устаревшее. Если уж делать, так делать чтобы было хорошо - на fetch и ES6-синтаксисе.

2. showProduct видимо, должна отобразить на экране продукт, но она создаёт новые элементы в dom, меняет ссылки, навешивает обработчики и добавляет продукт в app из глобальной области видимости.

3. snake_case после camelCase?

4. Писать синхронный код на фронте - большой смертный грех. Посмотрите это видео для понимания проблематики: https://www.youtube.com/watch?v=8cV4ZvHXQL4

5. Если вы автор этого кода - избавьтесь от своих обучающих материалов :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы