Как "достать" полученный массив для использования в других модулях проекта [Как использовать результат AJAX ответа в нескольких местах?]

Вопрос-ответ JavaScript
1

У меня в модуле backend.js (модуль - отдельный файл, в котором код заключён в IIFE) есть функция, которая запрашивает данные с сервера.

function httpRequest(url, method, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.send();

    xhr.addEventListener('load', function () {
      if (xhr.status === 200) {
        callback(JSON.parse(xhr.responseText));
        return;
      }

      var error = errorCodeMap[xhr.status] ? errorCodeMap[xhr.status] : xhr.status;
      showError('Ошибка ' + error);
    });
  }

  function load(onLoad) {
    var url = 'https://js.dump.academy/keksobooking/data';
    httpRequest(url, 'GET', onLoad);
  }

Я вызываю её в другом модуле mainPin.js при клике на mainPin:

 mainPinImg.addEventListener('mousedown', function (evt) {
    evt.preventDefault();
    window.backend.load(window.map.renderPins);

renderPins - это функция из модуля map.js, которая выводит ряд меток на карту, как раз берёт данные из полученного в результате запроса на сервер массива. Но мне нужно использовать этот массив с данными и для других целей в других модулях, не получая каждый раз заново его с сервера, например, для фильтрации. И я никак не могу понять, как мне его “выдрать” из xhr.addEventListener…, записать в переменную и использовать это переменную, где мне нужно, в других модулях

2

Тебе нужна функция которую можно использовать так:

getPinsData(function (pinsData) {
	// pinsData
})

Для потребителя getPinsData будет вызывать аргумент-коллбек с данными. Под капотом она будет запрашивать данные и кешровать их. При последующих вызовах будет отдавать данные из кеша, не делая запрос на сервер.

Примерная реализация getPinsData выглядит так:

var getPinsData = (function () {
	var cachedData
	return function (callback) {
		if (cachedData) {
			callback(cachedData)
		} else {
			load(function (loadedData) {
				cachedData = loadedData
				callback(loadedData)
			})
		}
	}
}());
3

ну і кеш якщо можливо, тримати б десь окремо, щоб можна було котролювати , коли його видаляти, та як описано, юзати його по аплікусі.

  • можна в backend файлі створити кеш обджект для різних кешів. створити функцію getFromCache(dataKey), та можливо булоб гарно котролювати “час життя кешу”.
  • (якщо структура така що все через window працює та окремі js файли) можна створити окермий файл cache.js та в ньому мати фкнціонал роботи з кешами

Ехх . Вспоминаю добрі часи кодінга з requirejs… без всіх тих фреймворків.

4

Ох, круууутооо… Спасибо, буду обмозговывать )

5

Спасибо, что поделились решением :)

6

Этот ответ подходит как решение?

7

Дима, решил по-другому. Не знаю. Если что, удали, пожалуйста, эту тему