使用拦截器在Ionic App中处理离线数据

Question

因此，有一点背景知识，我有这个项目并且正在研究版本2，该版本涉及添加脱机功能。 我坚持下面的堆栈，因为现在更改它会涉及很多开销：

Laravel API MYSQL离子

我听说过很多有关使用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 。

关于如何执行此操作的任何建议？

Answer 1

创建用于管理所有http请求并最终返回数据库数据的服务难道不是很容易吗？

拦截器

出于全局错误处理，身份验证或请求的任何同步或异步预处理或响应的后处理目的，希望能够在将请求移交给服务器之前拦截请求，并在将请求移交给服务器之前将响应拦截发起这些请求的应用程序代码。 拦截器利用promise 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调用可能期望的原因。 基本上，我们在这里正在尝试重新创建适当的响应。