我正在使用 Angular 开发一个应用程序,该应用程序对几个 Web 服务进行多次调用。我想为应用程序开发一个离线组件,以便它将某些 web 服务结果缓存到 LocalStorage 并在连接离线时使用它们。
这部分相当简单,而我最麻烦的部分是如何在应用程序离线时进行逻辑分支。
这是我目前的流程:
- 用户加载页面
- Web 服务调用照常进行
- $http 拦截器查找 404 错误并标记一个
$rootScope.isOnline
布尔标志以指示我们离线,否则如果没有 404 则我们标记为在线
我希望我的代码以可维护的方式根据此标志进行分支。因此,我正在考虑使用依赖注入来注入一个调用 web 服务的“在线”服务,或者一个“离线”服务,它与 LocalStorage 结果(如果存在)进行交互。
我可以基于在线/离线标志的依赖注入来注入正确的服务吗?
.factory('AuthService', ['$rootScope', '$injector', function($rootScope, $injector) {
if($rootScope.isOnline) {
return $injector.get('OnlineAuthService');
}
else {
return $injector.get('OfflineAuthService');
}
}])
.service('OnlineAuthService', ['$rootScope', '$http', '$location', 'serviceEndpoint', 'securityEndpoint', 'organisationId', function ($rootScope, $http, $location, serviceEndpoint, securityEndpoint, organisationId) {
this.ensureSession = function (data) {
// Do some connection to the webservice
};
}])
.service('OfflineAuthService', ['$rootScope', function ($rootScope) {
this.ensureSession = function (data) {
// Do some LocalStorage stuff
};
}])
AuthService.ensureSession(data);
我遇到的问题是$rootScope.isOnline
在第一次调用我的 web 服务之前没有标记为离线,所以即使连接离线,依赖注入也会查看$rootScope.isOnline
并注入 OnlineAuthService。
这是在 Angular 中开发在线/离线应用程序的正确方法还是有更好的方法?