码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS中的$http缓存以及处理多个$http请求

时间:2016-02-06 14:26:01      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

 

在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。

■ 处理多个$http请求

 

angular.module(‘app‘,[])
    .controller(‘AppCtrl‘, function AppCtrl(myService){
        var app = this;
        
        myService.getAll().then(function(info){
            app.myInfo = info;
        })
    })
    .service(‘myService‘, function MyService($http, $q){
        var myService = this;
            user = ‘https://api...‘,
            repos = ‘‘,
            events = ‘‘;
        
        myService.getData = function getData(){
            return $http.get(user).then(function(userData){
                return {
                    name:userData.data.name,
                    url:userData.data.url,
                    repoCount: userData.data.count
                }
            })
        };
        
        myService.getUserRepos = function getUserRepos(){
            return $http.get(repos).then(function(response){
                return _.map(response.data, function(item){
                    return {
                        name: item.name,
                        description:item.description,
                        starts: item.startCount
                    }
                })
            })
        }
        
        myService.getUserEvents = function getUserEvents(){
            ...
        }
        
        myService.getAll = function(){
            var userPromise = myService.getData(),
                userEventsPromise = myService.getUserRepos(),
                userReposPromise = myService.getUserRepos();
                
            return $q.all([userPromise, userEventsPromise, userReposPromise]).then(function(){
                ....
            })
        }
    })

 

■ $http请求缓存

$http的get方法第二个形参接受一个对象,该对象的cache字段可以接受一个bool类型实现缓存,即{cache:true},也可以接受一个服务。

通过factory方式创建一个服务,并把该服务注入到controller中去。

 

angular.module(‘app‘,[])
    .factory("myCache", function($cacheFactory){
        return $cacheFactory("me");
    })
    .controller("AppCtrl", function($http, myCache){
        var app = this;
        app.load = function(){
            $http.get("apiurl",{cache:myCache})
                .success(function(data){
                    app.data = data;
                })
        }
        
        app.clearCache = function(){
            myCache.remove("apiurl");
        }
    })

 

以上,

● 实际上,实现缓存机制的是$cacheFactory
● 通过{cache:myCache}把缓存机制放在当前请求中
● $cacheFactory把请求api作为key,所以清楚缓存的时候,也是根据这个key来清除缓存

AngularJS中的$http缓存以及处理多个$http请求

标签:

原文地址:http://www.cnblogs.com/darrenji/p/5184015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!