在 AngularJS (Angular 1.x) 中,$http.get
是用于发起 HTTP GET 请求的核心服务。它会返回一个 promise,允许你处理异步响应。
$cordovaSQLite
是一个 Ionic/Cordova 插件,用于在移动应用中提供 SQLite 数据库功能,允许应用在设备本地存储结构化数据。
当你在 Ionic 应用中同时使用 $http.get
和 $cordovaSQLite
时,可能会遇到以下问题:
$http.get
可能在短时间内被多次调用// 在服务中实现请求缓存
app.factory('DataService', function($http, $q) {
var cache = {}; // 简单的内存缓存
return {
getData: function(url) {
// 如果请求已经在进行中,返回相同的promise
if (cache[url]) {
return cache[url];
}
var deferred = $q.defer();
cache[url] = deferred.promise;
$http.get(url)
.then(function(response) {
deferred.resolve(response.data);
// 可选:在一定时间后清除缓存
// delete cache[url];
})
.catch(function(error) {
deferred.reject(error);
delete cache[url];
});
return deferred.promise;
}
};
});
app.service('LocalStorageService', function($cordovaSQLite, $q) {
this.checkDataExists = function(tableName, id) {
var q = $q.defer();
var query = "SELECT * FROM " + tableName + " WHERE id = ?";
$cordovaSQLite.execute(db, query, [id])
.then(function(result) {
if (result.rows.length > 0) {
q.resolve(result.rows.item(0)); // 数据存在
} else {
q.resolve(false); // 数据不存在
}
}, function(error) {
q.reject(error);
});
return q.promise;
};
this.saveData = function(tableName, data) {
var q = $q.defer();
var query = "INSERT OR REPLACE INTO " + tableName + " (id, data) VALUES (?, ?)";
$cordovaSQLite.execute(db, query, [data.id, JSON.stringify(data)])
.then(function(result) {
q.resolve(result);
}, function(error) {
q.reject(error);
});
return q.promise;
};
});
app.controller('MyController', function(DataService, LocalStorageService) {
var vm = this;
var apiUrl = 'https://api.example.com/data';
vm.loadData = function() {
// 1. 首先检查本地数据库
LocalStorageService.checkDataExists('my_data', 'some_id')
.then(function(localData) {
if (localData) {
// 使用本地数据
vm.data = JSON.parse(localData.data);
return $q.reject('USE_LOCAL_DATA'); // 特殊拒绝,表示使用本地数据
} else {
// 2. 如果没有本地数据,从网络获取
return DataService.getData(apiUrl);
}
})
.then(function(remoteData) {
// 3. 保存到本地数据库
return LocalStorageService.saveData('my_data', remoteData);
})
.then(function() {
// 数据保存成功
})
.catch(function(error) {
if (error !== 'USE_LOCAL_DATA') {
console.error('Error:', error);
}
});
};
});
这种模式特别适合以下场景:
没有搜到相关的文章