$http服务
一 介绍
AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据。我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
二 使用
1.链式调用
$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。
返回一个promise对象:
var promise=$http({
method:‘GET‘,
url:"data.json"
});
由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调。如果使用then方法,会得到一个特殊的参数,它代表了相应对象的成功或失败信息,还可以接受两个可选的函数作为参数。或者可以使用success和error回调代替。
promise.then(function(resp){
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});
或者这样:
promise.success(function(data,status,config,headers){
//处理成功的响应
});
promise.error(function(data,status,hedaers,config){
//处理失败后的响应
});
then()方法与其他两种方法的主要区别是,它会接收到完整的响应对象,而success()和error()则会对响应对象进行析构。
举例:
HTML部分:
<div ng-controller="myAppCtrl">
<label>username</label>
<input type="text" ng-model="username" placeholder="输入"/>
<pre ng-show="username">
{{users}}
</pre>
</div>
JS部分:
var myAppModule = angular.module("myApp",[]);
myAppModule.controller(‘myAppCtrl‘,[‘$scope‘,‘$timeout‘,‘myService‘,
function($scope,$timeout,myService){
var timeout;
$scope.$watch(‘username‘,function(newUserName){
console.log("您输入了:"+newUserName);
if(newUserName){
if(timeout){
$timeout.cancel(timeout);
}
timeout = $timeout(function(){
myService.userList(newUserName).success(function(data){
console.log(data);
$scope.users = data;
});
},350);
}
});
}
]);
myAppModule.factory(‘myService‘,[‘$http‘,function($http){
var doRequest = function(username){
return $http({
method:‘GET‘,
url:‘data.json‘
});
}
return {
userList:function(username){
return doRequest(username);
}
}
}]);
在相同的路径下建立data.json:
[{
"name":"test1"
},{
"name":"test2"
},{
"name":"test3"
}]
在service部分,注入一个属性 $http ,在方法内部,返回的值是一个对外提供的方法,userList。 外部可以通过 userList(username) 的方式,进行调用。 真正的实现部分放在 doRequest 中,内部就是典型的一个AngularJS的$http请求了,请求会返回url相应的数据。
在对应的控制器中,采用了$watch这种监控方法,监控username属性的变化。当username属性变化时,会触发请求方法。 控制器多注入了一个$timeout变量,该变量用于控制输入的时间。代码观察$timeout(function(...),350);当输入的间隔超过350ms时,就会触发相应函数function(...)。这样可以有效的防止,不停的刷新请求,造成网页的刷新抖动。 在函数内部,调用了我们自己的服务提供的userList方法。当请求成功时,绑定返回值到users中。users会动态的刷新内容。
2.快捷的get请求
$http.get(‘/api/users.json‘);
get()方法返回HttpPromise对象。
3.也可以将$http当做函数来使用,这时需要传入一个设置对象,用来说明如何构造XHR对象。
$http({
method:‘GET‘,
url:‘/api/users.json‘,
params:{
‘username‘:‘tan‘
});
其中设置对象可以包含以下主要的键:
①method
可以是:GET/DELETE/HEAD/JSONP/POST/PUT
②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。
//参数会转为name=ari的形式
$http({
params:{‘name‘:‘ari‘}
});
④data(字符串或者对象)
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。
4.响应对象
angularJS传递给then()方法的响应对象包含了四个属性。
data :这个数据代表转换过后的响应体(如果定义了转换的话)
status :响应的HTTP状态码
headers :这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字值