您的位置：首页 > Web前端 > AngularJS

angularJs中缓存数据，免去重复发起请求的几种写法

2016-12-26 18:09 351 查看

带缓存处理的两种写法

过程:点击button触发load()方法，请求数据成后显示到页面中。如果已经请求过则从缓存中读取。

在线浏览

写法1：

function demo(){
if (demo.cache == undefined) {
return $http.get('https://api.github.com/users/github')
.then(function(data, status, headers){
demo.cache = data.data;
return $q(function (resolve, reject) {
resolve(demo.cache);
});
})
}else {
console.log('from cache');
return $q(function (resolve, reject) {
resolve(demo.cache);
});
}
}

// 点击加载
$scope.load = function() {
demo().then(function(data){
$scope.list = data.data;
})
}

写法2：

感觉第二种写法好些，注意细节。

function demo(){
let deferred = $q.defer(), that = this;if (that.cache == undefined) {
$http.get('https://api.github.com/users/github')
.success(function(data, status, headers){
that.cache = data;
deferred.resolve(that.cache);
})
}else {
console.log('from cache');
deferred.resolve(that.cache);
}
return deferred.promise;
}

// 点击加载
$scope.load = function() {
demo().then(function(data){
$scope.list = data;
})
}

写法3 利用闭包缓存结果

// 利用闭包缓存结果
function demo2() {
let defer = $q.defer(), cache;
return function() {
if (cache == undefined) {
$http.get('https://api.github.com/users/github')
.then((res) => {
cache = res.data;
defer.resolve(cache);
})
}else {
console.log('from cache');
defer.resolve(cache);
}
return defer.promise;
}
}

// 点击加载
let startDemo = demo2();
$scope.load = function() {
startDemo().then(function(data){
$scope.list = data;
})
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航