Offline JavaScript Broker

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 приложения
*/functionBroker(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 () {
    returnObject.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 inthis.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) {
            //Удаляем объект по ключу, после успешной отправкиdeletethis.broker[brokerKey];
            //Перезаписываем объектthis.storage.add('broker', this.broker);
        }
        else {
            //оставим для дебага ;-)console.log(response.data)
        }
    })
    .catch(error => {
         /*
         Ну и кончено после всех успешных испытаний сделаем красивый отлов ошибок, но не в рамках данной статьи
        */
    });
};
//Не забываем сделать exportmodule.exports = Broker;

//Возможность включить debug-режим для отладкиfunctionStorage(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) {
    returnthis.storage.getItem(key);
};
//Получение объекта из нашего Json внутри, который мы записали другим методом выше
Storage.prototype.getObject = function (key) {
    try
    {
        returnJSON.parse(this.storage.getItem(key));
    }
    catch (e)
    {
        this._debug(e);
        this._debug(key + ' = ' + this.storage.getItem(key));
        returnfalse;
    }
};
/*
Добавление, чтобы не заморачиваться с методами, отдаем ему, а он уже сам выбирает как его записать, сериализовать в Json или записать в чистом виде
*/
Storage.prototype.add = function (key, value) {
    try
    {
        if(typeof value === 'object') {
            this.addObjectToStorage(key, value);
        }
        elseif (typeof value === 'string' || typeof value === 'number') {
            this.addStringToStorage(key, value);
        }
        else {
            //Небольшая проверка на типыthis._debug('2 parameter does not belong to a known type')
        }
        returnthis.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();
        returntrue;
    }
    catch (e)
    {
        this._debug(e)
        returnfalse;
    }
};
//Удаление элемента из хранилища
Storage.prototype.delete = function(key) {
    try
    {
        this.storage.removeItem(key);
        returntrue;
    }
    catch (e)
    {
        this._debug(e)
        returnfalse;
    }
};
//Маленький дебагер, которрый мы используем по ходу
Storage.prototype._debug = function(error) {
    if(this.debugMode)
    {
        console.error(error);
    }
    returnnull;
};
//Не забываем экспортировать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';
            }
            elseif(this.fundsFormType === 'update') {
                method = 'put';
            }
            elseif(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();
}
/*---*/