使用promises获取和设置值时,与Indexed db交互的最佳方式是什么?

时间:2017-09-04 10:32:17

标签: javascript angularjs indexeddb localforage

我正在使用 LocalForage库在我的网络应用中提供离线数据。

我有一个单独的服务来获取和设置索引数据库的值。服务如下,

var service = angular.module("DBService",[]);

service.factory('$dbService', function($q){
// Configuration
drivers = [localforage.INDEXEDDB, localforage.LOCALSTORAGE];
localforage.config({
    driver: drivers,
    name:"Cars"
});
localforage.setDriver(localforage.INDEXEDDB);
//
var _set = function(key_,value_){
    //
    var defered = $q.defer();
    localforage.setItem(key_, value_).then(
        function(data){
            //
            defered.resolve(data);
        }
    );
    return defered.promise;
};
var _get = function(key_){
    var defered = $q.defer();
    localforage.getItem(key_).then(
        function(data){
            //
            defered.resolve(data);
        }
    );
    return defered.promise; 
};

return {
    _set: _set,
    _get: _get
}

});

以下是视图,

<html ng-app="App">
<head>
<script src="angular.min.js"></script>
<script src="localforage.js"></script>
<script src="service.js"></script>
<script src="main.js"></script>
<title>Angular App</title>
</head>
<body>
<div ng-controller="DatabaseController" id="main" ng-init="pageInit()">
    <button ng-click="saveAsync(4)">click</button>
    <button ng-click="saveAsync2(5)">click</button>
</div>
</body>
</html>

以下是控制器,

var app = angular.module("App",['DBService']);

app.controller('DatabaseController', function($scope, $dbService){
//
$scope.pageInit = function(){
    //
    var initialize = [1,2,3];
    $dbService._set('List', initialize).then(
        function(data){
            //
            console.log("init : " + JSON.stringify(data));
        }
    );
};
//
$scope.$saveAsync = function(value_){
    //
    $dbService._get('List').then(
        function(data){
            //
            console.log("async operation : " + JSON.stringify(data));
            var tempList = data;
            tempList.push(value_);  
            $dbService._set('List',tempList).then(
                function(data){
                    //
                    console.log("async operation resolved : " +  data);
                }
            );
        }
    );
};
//
$scope.saveAsync = function(value_){
    //
    $scope.$saveAsync(value_);
};
//
$scope.saveAsync2 = function(value_){
    //
    $scope.$saveAsync(value_);
};
//
setInterval(function() {
    $scope.$saveAsync(6);
    $scope.$saveAsync(7);
}, 1000);
});

问题发生在setInterval,因为它将使用不同的参数调用$ scope。$ saveAsync()方法两次。但是在解决这两个承诺时,根据这种情况,它们只包含初始值1,2,3。 所以程序将在第一个$ scope中设置1,2,3,6。$ saveAsync()方法调用 第二个$ scope中的1,2,3,7。$ saveAsync()方法调用。最后只有1,2,3,7将被保存在indexeddb中,错过了值6。

有$ q.all解决了这个问题。但它仅适用于setInterval范围。由于用户可以在setInterval点读取相同数据的写入操作,同时运行指向相同的数据。

同样当我试图同时获取特定键值并尝试更新该键的值时,会出现问题。 因为调用方法get()有时会返回旧的数据集,因为get调用将是异步的。因此,当在旧数据集中调用set方法时,索引数据库中的数据会松散。

感谢您的建议。

0 个答案:

没有答案