最近在用angularjs写了一个github page博客，要用的github的jsonp api来获取文件列表。
这是github的api： GET /repos/:owner/:repo/contents/:path。
我想要在AngularJS缓存下JSONP请求。一开始代码是这样写的：
$http.jsonp("https://api.github.com/repos/cs1707/blog/posts?callback=ANGULAR_CALLBACK",{ cache : true}); 但是奇怪的是{ cache : true } 并没有起作用。在chrome查看网络请求，发现有这样几个请求
https://api.github.com/repos/cs1707/blog/contents/posts?callback=angular.callbacks._0
https://api.github.com/repos/cs1707/blog/contents/posts?callback=angular.callbacks._1
https://api.github.com/repos/cs1707/blog/contents/posts?callback=angular.callbacks._2
说明AngularJS对于JSONP请求每次都生成不同的url。
下面用$cacheFactory缓存JSONP请求。
app.service("GBlog", ["$q", "$http", "$cacheFactory", function($q, $http, $cacheFactory) {
var cacheEngine = $cacheFactory("list"); // caches name
this.getList = function(url){
var cache = cacheEngine.get("list");
var d = $q.defer();
if(cache) {
// get from cache
d.resolve(cache);
} else {
$http.jsonp(url,{cache: true})
.success(function(data){
// store to cache
cacheEngine.put("list", data);
d.resolve(data);
})
.error(function(error){
d.reject(error);
});
}
return d.promise;
}
在chrome查看网络请求。可以看到只生成这样一个请求https://api.github.com/repos/cs1707/blog/contents/posts?callback=angular.callbacks._0 OK 缓存JSONP请求成功。
