AngularJs(四):$Http,$resource
来源:互联网 发布:linux查看oracle实例 编辑:程序博客网 时间:2024/05/21 01:56
一.使用$http
$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。例如代码:
$http({
method:"GET",
url:'/xx/xx'
url:'/xx/xx'
}).success(function(data,status,headers,config){
//当相应准备就绪时调用
}).error(function(data,status,headers,config){
//当响应错误状态返回时调用
})
这个方法实际上返回了一个promise对象。当promise返回的时候,我们可以将$http方法的运行结果当作变量返回。例如:
var promise = $http({
method = 'GET',
url:'/xx/xx'
url:'/xx/xx'
});
由于$http方法返回一个promise对象,我们可以在响应返回的时候用then方法来处理回调。如果使用then方法,可以得到一个特殊的参数,它代表了相应对象的成功或者失败信息,还可以接受两个可选的函数作为参数。或者使用success和error进行回调代替。
promise.then(function(resp){
//resp是一个响应对象
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});
或者使用success/error方法:
promise.success(function(data,status,headers,config){
//处理成功的响应
});
promise.error(function(data,status,headers,config){
//处理非成功的响应
})
如果响应码在200--299之间,会认为响应是成功的,success回调将被调用,否则Error回调会被调用。注意:如果响应的结果是重定向,XMLHttpRequest会跟进这个重定向。
快捷方法:
$http服务提供了一些顺手快捷的方法供我们使用,这些方法简化了复杂的设置,只需要提供URL和HTTP方法(或者POST或PUT请求中包含的数据)即可。
用这些快捷的方法,可以将上面的$http的GET请求修改成:
$http.get('/xx/xx');
1.get()
这个方法是发送GET请求的快捷方式。get()可以接受两个参数---url(相对或者绝对)config(可选,对象)。get()方法返回HttpPromise对象。
2.delete()
和上面的一样,但是发送的是delete请求。
3.head()
和上面的一样,但是发送的是HEAD请求
4.jsonp()
和上面的一样。
5.post()
这是用来发送post()请求的快捷方式
post请求可以接受3个参数。url,data,config。同样返回一个HttpPromise对象
6.put()
和post一样,同样接受3个参数请求
和post一样,同样接受3个参数请求
二.设置对象
我们把$http当作函数来调用时,需要传入一个设置对象,用来说明如何构造XHR对象。例如,下面的$http当作函数来调用:
$http({
method:'GET',
}) url:'/xx/xx',
params:{
'username':'user',
}
}
method:即是我们设置的http请求方式
params:json数据即可。
data:这个对象将会被当作消息体发送给服务器的数据。通常在发送post请求时使用。例如:
var blob = new Blob(['Hello world'],{'text':'abc'});
$http({
method = 'post',
url:'/',
data:blob
data:blob
})
timeout:可以指定毫秒,在指定的毫秒数后执行。
三.响应对象
AngularJs传递给then()方法的响应对象包含4个属性
data(字符串或者对象)
这个数据代表转换过后的响应体(如果定义了转换的话)
status(数值型)
响应HTTP状态码
四.缓存HTTP请求
默认情况下,$http服务不会对请求进行本地缓存,在发送单独的请求时,我们可以通过向$http请求传入一个布尔值或者缓存实例来启用缓存。例如:
$http.get('/xx/xx',{cache:true})
.success(function(data){})
.error(function(data){});
第一次发送请求的时候,$http服务会向/xx/xx发送一个GET请求。第二次同发出一个GET请求的时候,$http服务会从缓存中取回请求结果,而不会真的发送一个HTTP GET请求。
由于设置了启动缓存,AngularJs默认会使用$cacheFactory。这个服务是AngularJs在启动时自动创建的。如果想要对AngularJs使用的缓存进行更多的自定义控制,可以传入一个自定义的缓存实例代替true。
例如,可以使用LRU等缓存。
例如,可以使用LRU等缓存。
五.拦截器
任何时候我们要是想为请求添加全局变量,例如身份验证,错误处理等,在请求发送给服务器之前或者从服务器返回时对其拦截,是比较好的实现手段。
例如对于身份验证,如果服务器返回401状态码,我们会希望将用户重定向到登录界面。
AngularJs通过对拦截器提供了一个从全局层面对响应进行处理的途径。
在前端里有拦截器,听起来高大上,其实就是$http服务的一个中间件,用来向应用的业务流程中注入新的逻辑。
拦截器的核心是服务工厂,通过向$httpProvider.interceptors数组中添加服务工厂,在$httpProvider中进行注册。
一共有4种拦截器。2种成功拦截器,2种失败拦截器。
request:
response:
requestError:
responseError:
调用模块的.factory()方法来来创建拦截器,可以在服务中添加一种或者多种拦截器:
angular.module('myApp',[])
angular.module('myApp',[])
.factory('myInterceptor',function($q){
var interceptor = {
}) 'request':function(config){
//成功的请求方法
return config;
return config;
},
'response':function(response){
//响应成功
return response;
return response;
}
'requestError':function(rejection){
//请求发生了错误,如果能从错误中恢复,可以返回一个请求或promise。
return response;
//或者,可以通过返回一个rejection来阻止下一步
//return $q.reject(rejection);
//return $q.reject(rejection);
}
'responseError':function(rejection){
//请求发生了错误,如果能从错误中恢复,可以返回一个请求或promise。
return response;
} //或者,可以通过返回一个rejection来阻止下一步
//return $q.reject(rejection);
//return $q.reject(rejection);
};
reutrn interceptor;
reutrn interceptor;
然后,我们需要使用$httpProvider在.config函数中注册拦截器
angular.module('myApp',[])
.config(function($httpProvider){
$httpProvider.interceptors.push('myInrerceptor');
});
});
六.使用$resource
$resource服务可以将$http请求转换成save和update等简单形式。我们可以通过$resource服务来处理复杂的细节,而无需自己写重复和繁琐的的业务代码。
用法:
1.加入angular-resource.js文件。
2.将ngResource当作依赖来进行引用:
angular.module('myApp',['ngResource']);
这样就可以使用ngResource服务。
这样就可以使用ngResource服务。
$resource基于HTTP GET方法
两个HTTP GET类型的方法可以接受3个参数:params,successFn(响应成功时的回调函数),errorFn(响应不成功时的回调函数)
1.get(params,successFn,errorFn)
期望一个JSON类型的响应。例如:
User.get(function(resp){
//处理响应成功
},function(err){
//处理错误
})
})
像这样的不定义具体的参数,get()请求通常用来获取单个资源。
2.query(params,successFn,errorFn)
User.get({
id:'123'
},function(resp){id:'123'
//处理响应成功
},function(err){
//处理错误
})
})
2.query(params,successFn,errorFn)
期望得到一个JSON格式的资源对象集合。
User.query(function(users){
//读取集合中的第一个用户
var user = users[0];
})var user = users[0];
query()和get()方法之间的唯一区别就是Angular期望query()方法返回数组。
3个基于非HTTP GET类型的方法
1.save(params,payload,successFn,errorFn) 用于在服务器上生成一个资源
User.save({},{
name:'Ari'
},function(response){
//处理响应成功
},function(response){
//处理非成功响应
})
2.delete(params,payload,successFn,errorFn) 用于在服务器上删除一个实例
User.delete({},{
id:'123'
},function(response){
//处理响应成功
},function(response){
//处理非成功响应
})
})
3.remove 和delete一样
$resource实例:
上述方法返回数据的时候,响应会被一个原型类所包装,并在实例上添加一些有用的方法。实例对象上会添加下面3个实例方法:
$save()
$remove()
$delete()
这3个方法可以在资源实例上被调用。例如:
$resource实例是异步的
User.get({
id:'123'
},function(resp){id:'123'
//处理响应成功
user,name = "123";
user.$save(); //save the user
user.$save(); //save the user
},function(err){
//处理错误
})
这三个方法在调用的时候$resource对象会立即返回一个空对象。由于所有数据都是异步执行,所以这个数据是一个空对象,并不是真实的数据。
当数据从服务器返回后,AngularJs会自动将数据填充上去。
例如:
$scope.user = User.get({id:'123'});
这些方法也提供了回调函数,在数据返回时按照预期的方式调用:
User.get({id:'123'},function(user){
$scope.user = user;
})
})
$resource设置对象
1.method是我们需要发送的http请求,他是以下的值之一:GET,POST,DELETE,JSONP,PUT
2.url
3.params
4.isArray:如果isArray设置为true,那么这个动作对象会以数组的形式返回。
5.cache:如果cache属性被设置为true,按么AngularJs会用默认的$http缓存对GET请求进行缓存。
6.timeout:延迟发送。
7.interceptor(对象):拦截器属性有两个可选的方法:response或responseError。这些拦截器像普通的$http拦截器一样,由$http请求对象调用。
$resource服务
我们将$resource服务当作自定义服务的基础。创建自定义服务给我们的应用进行高度自定义的能力,可以对远程服务进行抽象,并且从控制器和视图中解耦出来。
最后,我们强烈建议在自定义的服务对象内部使用$resource。可以一定意义上保证控制器的清洁。
要创建一个封装$resource的服务,需要将$resource的服务注入到我们用来封装的服务对象中,并且像平时一样调用其方法。
如下所示:
angular.module('MyApp',['ngResource'])
.factory('UserService',[
'$resource',function($resource){
]) return $resource('/xx/xx/:id',{
} id:'@'
},{
update:{
}) method:'PUT'
}
}
0 0
- AngularJs(四):$Http,$resource
- Angularjs中的$Http与$resource
- AngularJS $resource
- AngularJS $resource RESTful example
- AngularJS的$resource
- AngularJS的$resource
- AngularJS $resource举例
- Angularjs的$resource使用
- AngularJS中使用$resource
- restangular: Differences with $resource 接上篇Something about http request in angularjs
- angularjs $http
- AngularJS $http
- angularjs $http
- AngularJS http
- AngularJS $http
- angularjs - Error: [$resource:badcfg] Error in resource
- angularjs(三):$resource介绍
- angularjs 的定制服务$resource
- Jquery树控件ZTree保持单一路径并定时刷
- Telnet用法
- 很好的理解遗传算法的例子
- angularjs(三):$resource介绍
- NTU-Coursera机器学习:过拟合(Overfitting)与正规化(Regularization)
- AngularJs(四):$Http,$resource
- mac eclipse 修改 command+Q 防止误操作 应用
- Cocoa:异常
- swift iphone 页面跳转-代码跳转方法
- AngularJs(五):路由
- linux创建进程方法
- 考研数据结构与算法之排序专题三 直接插入排序
- pb 设置打印机
- Solr\Lucene优劣势分析