Функции в js. Я запутался. Надо и ajax, и window.onload, и вернуть значение

30 января 2021, 00:40

Я по-прежнему плаваю в js. Нужны Ваши пояснения, чтобы разобраться с функциями в js раз и навсегда. Речь не о стрелочных, а об обычных. Вот пример кода (т.к здесь ajax он у вас не сработает при запуске):

const leftBar = document.querySelector('.left-bar'); 
 
window.onload = show_files 
 
function show_files(){ 
	let xhr = new XMLHttpRequest(); 
	xhr.open('GET', 'php/files_list.php'); 
	xhr.send(); 
	xhr.onreadystatechange = function(){ 
		if(xhr.readyState != 4){ 
			return;	 
		} 
		if(xhr.status == 200){ 
			leftBar.removeAttribute('style'); 
			let resp = JSON.parse(xhr.response); 
			leftBar.innerHTML += (resp.length == 0)  
			? `<p><b>Файлов загружено: ${resp.length} </b></p>`  
			: `<p><b>Файлов загружено: ${resp.length} </b></p> 
			<ul id="files"></ul><br> 
			<button class="padding-5" id="clear">Удалить файлы</button>` 
			//Заполняем ul 
			let ul = document.querySelector('#files') 
			for(let i in resp){ 
				let li = document.createElement('li') 
				li.innerHTML = resp[i]; 
				ul.appendChild(li) 
			} 
			arr = [...ul.children]; 
			return arr; 
		} 
		else if(xhr.status != 200){ 
			leftBar.style.border = '1px solid red' 
			leftBar.innerHTML = 'Ошибка: ' + xhr.status 
		} 
	} 
}

Немного прокомментирую код. Если на сервере нет файлов, то в .leftBar будет написано "Файлов загружено: 0". Если есть: "Файлов загружено: 15", список файлов и кнопка "Удалить файлы".

Но при этом мне нужно вернуть массив arr = [...ul.children];

Когда я ввожу arr в консоли, то она выводит массив, как надо. Но если где-то в коде нужно поработать с этой же переменной, то выходит ошибка "arr is not defined".

Итак, вопросы: 1) Как выполнить ajax и вернуть arr одновременно (только асинхронно?)? 2) Почему в консоли переменная видна, а при вызове в коде - нет? В коде я прописывал, кажется, по-всякому... 3) Как js понимает, где нужно выполнить функцию, а где сделать return? 4) Почему функции иногда пишут без скобок (речь опять не о стрелочных)? Например, show_files(); и show_files;

То же самое со стрелочной функцией. Массив не возвращается...

const show_files = () => { 
	let xhr = new XMLHttpRequest(); 
	xhr.open('GET', 'php/files_list.php'); 
	xhr.send(); 
	xhr.onreadystatechange = function(){ 
		if(xhr.readyState != 4){ 
			return;	 
		} 
		if(xhr.status == 200){ 
			leftBar.removeAttribute('style'); 
			resp = JSON.parse(xhr.response); 
			leftBar.innerHTML += (resp.length == 0)  
			? `<p><b>Файлов загружено: ${resp.length} </b></p>`  
			: `<p><b>Файлов загружено: ${resp.length} </b></p> 
			<ul id="files"></ul><br> 
			<button class="padding-5" id="clear">Удалить файлы</button>` 
			//Заполняем ul 
			let ul = document.querySelector('#files') 
			for(let i in resp){ 
				let li = document.createElement('li') 
				li.innerHTML = resp[i]; 
				ul.appendChild(li) 
			} 
			let arr = [...ul.children]; 
			return arr; 
		} 
		else if(xhr.status != 200){ 
			leftBar.style.border = '1px solid red' 
			leftBar.innerHTML = 'Ошибка: ' + xhr.status 
		} 
	} 
} 
 
let arr = show_files();

Спасибо за Ваши ответы!

Answer 1

а зачем вам вообще arr вы добьавляеть в ul кторые уже есть разметке

просто там где вам нужен будет arr сделайте так

let arr = [...document.querySelector('#files').children]

Используте промисы эьл уже давно стандарт и будет ок работать везде

const leftBar = document.querySelector('.left-bar');
window.onload = show_files
async function show_files(){
    let data =  await fetch('php/files_list.php');
    // в дате будет что сто от сервера и потом пишите логику и верните массив
}

из запросов проблемно возвращать данные