Оффлайн брокер на JavaScript

const Broker = require('./Library/Broker');
const Storage = require('./Library/Storage');

module.exports.Broker = Broker;
module.exports.Storage = Storage;

const axios = require('axios'); //Мне нравится axios

/*
Это и есть подобие конструктора.
Префикс нужен для того, чтобы мы могли использовать разные объекты для хранения в разных частях front-end приложения
*/
function Broker(storage, prefix='storageKey') {
    this.storage = storage;
    this.prefix = prefix;
   
    /*
    Если наш брокер пока пустой, мы загоним в него пустой объект. Главное чтобы storage с функцией add умел преобразовать его в json
    */
    if(this.storage.get('broker') === null) {
        this.broker = {};
        this.storage.add('broker', this.broker)
    }
    else {
        //А здесь наоборот, Storage должен уметь из Json отдать нам объект который мы запишем в свойство нашего прототипного класса
        this.broker = this.storage.getObject('broker');
    }
};

//Просто счетчик, чтобы мы могли определить сколько сообщений ожидает отправки на сервер
Broker.prototype.queueCount = function () {
    return Object.keys(this.broker).length;
};

//Метод сохранения "неудовлетворенного" запроса в наш Storage, с присвоением ключа
Broker.prototype.saveToStorage = function (method, url, data) {
    let key = this.prefix + '_' + (Object.keys(this.broker).length + 1);

    this.broker[key] = {method, url, data};

    //Кстати здесь тоже желательно сделать разные ключи а не записывать все в broker, но для упрощения примера решил оставить так
    this.storage.add('broker', this.broker);
};

//Это метод, который будет отправлять данные, когда восстановится соединение
Broker.prototype.run = function () {
    for (let key in this.broker) {
        this.sendToServer(this.broker[key], key)
    }
}

/*
Метод отправки на сервер. Нам нужен объект с записанными данными для отправки, который содержит в себе method, url и data, а так же ключ элемента в нашем хранилище, чтобы удалить по нему, после успешной отправки
*/
Broker.prototype.sendToServer = function (object, brokerKey) {

    axios({
        method: object.method,
        url: object.url,
        data: object.data,
    })
    .then(response => {
        if(response.data.status == 200) {
            //Удаляем объект по ключу, после успешной отправки
            delete this.broker[brokerKey];
            //Перезаписываем объект
            this.storage.add('broker', this.broker);
        }
        else {
            //оставим для дебага ;-)
            console.log(response.data)
        }

    })
    .catch(error => {
         /*
         Ну и кончено после всех успешных испытаний сделаем красивый отлов ошибок, но не в рамках данной статьи
        */
    });

};

//Не забываем сделать export
module.exports = Broker;

//Возможность включить debug-режим для отладки
function Storage(debug) {
    if(debug === true)
    {
        this.debugMode = true;
    }

    this.storage = window.localStorage;
};

//Специальный метод, для преобразования объекта в Json и сохранении его в хранилище
Storage.prototype.addObjectToStorage = function (key, object) {
    this.storage.setItem(key, JSON.stringify(object));
};

//Для записи остальных параметров (чисел, булевых и строк)
Storage.prototype.addStringToStorage = function (key, value) {
    this.storage.setItem(key, value);
};

//Получение элемента из хранилища
Storage.prototype.get = function (key) {
    return this.storage.getItem(key);
};

//Получение объекта из нашего Json внутри, который мы записали другим методом выше
Storage.prototype.getObject = function (key) {
    try
    {
        return JSON.parse(this.storage.getItem(key));
    }
    catch (e)
    {
        this._debug(e);
        this._debug(key + ' = ' + this.storage.getItem(key));
        return false;
    }
};

/*
Добавление, чтобы не заморачиваться с методами, отдаем ему, а он уже сам выбирает как его записать, сериализовать в Json или записать в чистом виде
*/
Storage.prototype.add = function (key, value) {
    try
    {
        if(typeof value === 'object') {
            this.addObjectToStorage(key, value);
        }
        else if (typeof value === 'string' || typeof value === 'number') {
            this.addStringToStorage(key, value);
        }
        else {
            //Небольшая проверка на типы
            this._debug('2 parameter does not belong to a known type')
        }

        return this.storage;

    }
    catch (e)
    {
       //Защита от переполнения хранилища встроенная, но нам нужно знать, если такое случится
        if (e === QUOTA_EXCEEDED_ERR) {
            this._debug('LocalStorage is exceeded the free space limit')
        }
        else
        {
            this._debug(e)
        }
    }
};

//Очистка хранилища
Storage.prototype.clear = function () {
    try
    {
        this.storage.clear();
        return true;
    }
    catch (e)
    {
        this._debug(e)
        return false;
    }
};

//Удаление элемента из хранилища
Storage.prototype.delete = function(key) {
    try
    {
        this.storage.removeItem(key);
        return true;
    }
    catch (e)
    {
        this._debug(e)
        return false;
    }
};

//Маленький дебагер, которрый мы используем по ходу
Storage.prototype._debug = function(error) {
    if(this.debugMode)
    {
        console.error(error);
    }
    return null;
};

//Не забываем экспортировать
module.exports = Storage;

//это внутри объекта Vue (methods)

/*----*/

//Здесь и объявляем наш брокер и Storage для него
sendBroker(method, url, data) {
            let storage = new Storage(true);
            let broker = new Broker(storage, 'fundsControl');
            broker.saveToStorage(method, url, data);
        },

//Здесь выполняем свой обычный запрос
fundsSave() {

            let url = '/pa/funds';
            let method = '';

            if(this.fundsFormType === 'create') {
                method = 'post';
            }
            else if(this.fundsFormType === 'update') {
                method = 'put';
            }
            else if(this.fundsFormType === 'delete') {
                method = 'delete';
            }

            this.$store.commit('setPreloader', true);

            axios({
                method: method,
                url: url,
                data: this.fundsFormData,
            })
                .then(response=> {
                    if(response.data.status == 200) {
                        this.fundsFormShow = false;
                        this.getFunds();
                        this.$store.commit('setPreloader', false);
                    }
                    else {
                        this.$store.commit('AlertError', 'Ошибка получения данных с сервера');
                    }

                })
                //А как раз здесь отлавливаем нашу ошибку соединения
                .catch(error => {
                    this.$store.commit('setAlert',
                        {
                            type: 'warning',
                            status: true,
                            message: 'Ошибка соединения с сервером. Однако, ваши данные не будут уреряны и будут записаны, после восстановления соединения'
                        }
                        );
                    this.fundsFormShow = false;
                    this.$store.commit('setPreloader', false);

                   //И записываем наш "неудовлетворенный" запрос
                    this.sendBroker(method, url, this.fundsFormData);

                    console.error(error);
                });
        },

//Это код компонента Vue
/*--*/

methods: {

/*----*/

/*
Инициация нашего брокера, с теми же параметрами, чтобы мы знали, что работаем с теми же ключами, с которыми записывали в брокер
*/
brokerSendRun()
        {
            let storage = new Storage(true);
            let broker = new Broker(storage, 'fundsControl');

            //Проверяем, что есть что-то не отправленное
            if(broker.queueCount() > 0)
            {
                //Запускаем метод, который все отправит
                broker.run();
                
                //Выводим общий алерт приложения, с уведомлением
                this.$store.commit('setAlert', {type: 'info', status: true, message: 'Есть сообщения не отправленные на сервер из-за ошибок соединения, проверьте, что все данные успешно сохранены сейчас'});
            }

        }
}

/*---*/

/*
Ну и вызываем наш метод, например, при монтировании компонента, как раз скорее всего после оторвавшегося соединения будет перезагрузка страницы, и уж если она загрузится, то и наши сообщения отправятся на сервер
*/
mounted() {
        this.brokerSendRun();
}

/*---*/