Простой ajax запрос на чистом XMLHttpRequest

// запрос на сервер
 
const xhr = new XMLHttpRequest();
 
xhr.open(
  'get',
  'https://jsonplaceholder.typicode.com/photos/',
  true, );
xhr.responseType = 'json';
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.addEventListener( 'load',  () => getData( xhr.response )  );
xhr.addEventListener( 'abort', () => console.log( 'progress onabort' ));
xhr.addEventListener( 'error', () => console.log( 'progress onerror' ));
xhr.onprogress = function(event) { // запускается периодически
  // event.loaded - количество загруженных байт
  // event.lengthComputable = равно true, если сервер присылает заголовок Content-Length
  // event.total - количество байт всего (только если lengthComputable равно true)
  console.log(`Загружено ${event.loaded} из ${event.total}`);
 
  if (xhr.status === 200 ) {
    // count = new Set(xhr.response).size;
    // console.log( 'count = ' ,new Set(xhr.response).size );
    // console.log( xhr.response);
  } else {
    console.log('err', xhr.responseText)
  }
}
xhr.send();
 
var count =  undefined; // эта переменная глобальная и это мне не нравится !
 
function getData( data ) {
  return count = data['length'];// узнаю общее количество файлов (например фото) для счетчика запросов ajax
}
 
function nextRequest(){
  count;
  const wrapper = document.querySelector( '.wrapper' )
 
  return function () {
    let div_wrapper = document.createElement( 'div' )
    div_wrapper.classList.add( 'wrapper_ajax' );
 
    let panel = document.createElement( 'p' );
    panel.innerText = 'Описание фото'
 
    let request_img = document.createElement( 'div' );
    request_img.classList.add( 'request_img' );
    request_img.style.background = `url(${xhr.response[count-1].url})`; // url файла для подгрузки ajax-ом
    request_img.style.backgroundSize = "100% 100%";
    request_img.style.backgroundRepeat = "no-repeat";
 
    div_wrapper.appendChild( panel );
    div_wrapper.appendChild( request_img )
    wrapper.appendChild( div_wrapper )
 
    count--; // уменьшаю счетчик
  }
}
 
const newRequest = nextRequest();
 
const btn_ajax_request = document.querySelector( '.ajax' )
btn_ajax_request.addEventListener( 'click', () => newRequest() );

/ запрос на сервер
 
const xhr = new XMLHttpRequest();
 
xhr.open(
  'get',
  'https://jsonplaceholder.typicode.com/photos/',
  true, );
xhr.responseType = 'json';
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.addEventListener( 'load',  () => getData( xhr.response, nextRequest )  );
xhr.addEventListener( 'abort', () => console.log( 'progress onabort' ));
xhr.addEventListener( 'error', () => console.log( 'progress onerror' ));
xhr.onprogress = function(event) { // запускается периодически
  // event.loaded - количество загруженных байт
  // event.lengthComputable = равно true, если сервер присылает заголовок Content-Length
  // event.total - количество байт всего (только если lengthComputable равно true)
  console.log(`Загружено ${event.loaded} из ${event.total}`);
 
  if (xhr.status === 200 ) {
    // count = new Set(xhr.response).size;
    // console.log( 'count = ' ,new Set(xhr.response).size );
    // console.log( xhr.response);
  } else {
    console.log('err', xhr.responseText)
  }
}
xhr.send();
 
 
function getData( data, f ) {
  let count = data['length'];// узнаю общее количество файлов (например фото) для счетчика запросов ajax
  console.log('count = ', count)
  return f(count);
}
 
function nextRequest(count){
  console.log('count from nextRequest = ', count)
  const btn_ajax_request = document.querySelector( '.ajax' )
  const wrapper = document.querySelector( '.wrapper' )
 
  return btn_ajax_request.addEventListener( 'click', () => {
    console.log('count from addEventListener = ', count)
    let div_wrapper = document.createElement( 'div' )
    div_wrapper.classList.add( 'wrapper_ajax' );
 
    let panel = document.createElement( 'p' );
    panel.innerText = 'Описание фото'
 
    let request_img = document.createElement( 'div' );
    request_img.classList.add( 'request_img' );
    request_img.style.background = `url( ${xhr.response[count-1].url} )`; // url файла для подгрузки ajax-ом
    request_img.style.backgroundSize = "100% 100%";
    request_img.style.backgroundRepeat = "no-repeat";
 
    div_wrapper.appendChild( panel );
    div_wrapper.appendChild( request_img )
    wrapper.appendChild( div_wrapper )
 
    count--; // уменьшаю счетчик
  });
}