美文网首页
缓存AngularJS JSONP请求

缓存AngularJS JSONP请求

作者: WangPeng | 来源:发表于2014-04-07 21:08 被阅读0次

    最近在用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请求成功。

    相关文章

      网友评论

          本文标题:缓存AngularJS JSONP请求

          本文链接:https://www.haomeiwen.com/subject/drlltttx.html