Обработка автономных данных в приложении Ionic с использованием перехватчика

Question

Обработка автономных данных в приложении Ionic с использованием перехватчика

0

Так что немного фона, у меня есть этот проект и я работаю над версией 2, которая предполагает добавление в автономную функциональность. Я придерживаюсь следующего стека, так как изменение его теперь потребует значительных накладных расходов:

API Laravel MYSQL Ionic

Я много слышал о синхронизации с помощью Pouch/CouchDB, но, к сожалению, я не могу изменить все, чтобы использовать этот стек.

В своих ограниченных знаниях AngularJS/JS я решил использовать HTTP-перехватчик для перехвата всех запросов, проверьте, является ли это запросом POST/PUT, проверьте, включено ли устройство в автономном режиме, или сохраняйте данные в локальном хранилище или выполняйте запрос. Здесь начинаются проблемы.

Вот мой APIInterceptor:

App.factory('APIInterceptor', function ($q) {

    return {
        request: function (config) {

            if(config.method == 'POST' || config.method == 'PUT')
            {
                //Add data to localstorage

                //Exit without actually sending the request to the server.
                return $q.reject();
            }

            return config || $q.when(config);
        }
    };
});

Как вы можете видеть, я возвращаюсь .reject() но мне нужно подражать ответу API и возвращаться к моей службе, как если бы запрос был успешно обработан, поэтому мое приложение может работать как обычно. По существу возвращающий успех, код статуса 200 после того, как данные были сохранены в localstorage.

Любые предложения о том, как я могу это сделать?

ChrisBratherton 01 окт. 2015, в 23:52

Источник

Теги:

javascript

ionic-framework

angularjs

offline

offlineapps

1 ответ

Ещё вопросы

LeftyX · Accepted Answer · 2015-10-02T09-26-00.000Z

Не будет ли проще создать службу, в которой вы будете управлять всеми HTTP-запросами и, в конце концов, вернуть данные своей базы данных?

Перехватчики

Для целей глобальной обработки ошибок, аутентификации или любой синхронной или асинхронной предварительной обработки запроса или последующей обработки ответов желательно иметь возможность перехватывать запросы до их передачи серверу и ответов до их передачи код приложения, который инициировал эти запросы. Перехватчики используют обещающие API для удовлетворения этой потребности как для синхронной, так и для асинхронной предварительной обработки.

Я думаю, вам не нужно проверять, находится ли устройство в сети/в автономном режиме, поскольку вы получите requestError в своем перехватчике.

Поскольку вы хотите перехватить сообщение до того, как оно действительно произойдет, вы можете использовать этот вид перехватчика:

.factory('APIInterceptor', function APIInterceptor($q) {
    return {
            request: function (config) {
                if(config.method == 'POST' || config.method == 'PUT')
                {
                    return $q.reject({status: 503, config: config});
                }
                return config || $q.when(config);
            },

            // response: function (httpResponse)
            // {
            //     return httpResponse || $q.when(httpResponse);
            // },

            responseError: function (rejection)
            {
                if (rejection.status === 503) {
                    rejection.status = 200;
                    rejection.statusText = "OK";
                    rejection.data = {};
                    return $q.resolve(rejection);
                }
                return $q.reject(rejection);
            }
        };
});

Если запрос POST или PUT, вы можете отклонить его, добавив статус и передав конфигурацию:

if(config.method == 'POST' || config.method == 'PUT')
{
    return $q.reject({status: 503, config: config});
}

responseError будет обработан.
Теперь вы можете проверить свой статус и решить обещание, чтобы ваш $http вызов не обнаружил исключения:

if (rejection.status === 503) {
    rejection.status = 200;
    rejection.statusText = "OK";
    rejection.data = {};
    return $q.resolve(rejection);
}

Я добавил объект data вызывает то, что может ожидать ваш http-вызов. В принципе, то, что мы делаем здесь, пытается воссоздать правильный ответ.

Я не пробовал твой код, так как все равно пошел по служебному маршруту. Так принято, как ты и предполагал. :) Спасибо