angularjs中的$http详解

发布时间：2023-09-06 01:53责任编辑：熊小新关键词：js http

语法:
要将区别先弄清$http服务，它是对原生XMLHttpRequest对象的简单封装，是只能接受一个参数的方法，
这个方法会返回一个promise对象，具有sccess和error两个方法。当然，我们也可以在响应返回时用then
方法来处理，会得到一个特殊的参数，代表了对象的成功或失败信息，或者可以使用success和error回调
代替。
$http(
).then(functionsuccess(resp){
//响应成功时调用，resp是一个响应对象
},functionerror(resp){
//响应失败时调用，resp带有错误信息
}
);
可以使用then()函数来处理$http服务的回调
then()函数接收的resp（响应对象）包含5个属性：　
1.data（字符串或对象）：响应体,就是后台返回的数据
2.status:相应http的状态码,如200
3.headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值
4.config(对象)：生成原始请求的完整设置对象
5.statusText:相应的http状态文本，如"ok"
$http({
url:url,//请求的url路径
method:method,//GET/DELETE/HEAD/JSONP/POST/PUT
params:params,//转为?param1=xx1?m2=xx2的形式
data:data//包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
}
}).success(function(response,status,header,config,statusText){
//成功处理
}).error(function(data,header,config,status){
//错误处理
});
then写法与success参数是等价的,then方法和success方法的主要区别就是，then方法会接受到完整的响应对象，而
success则会对响应对象进行析构。
AngularJS中的简单请求---$http---一个类似jquery的$.ajax的对象，用于异步请求
语法：
$http服务的设置对象:
当我们把$http当成函数来使用时即$http()，需要传入一个对象，这个对象可以包含以下键
1、method字符串表示发送的请求类型getpostjsonp等等
2、url字符串绝对或者相对的URL,请求的目标
3、params字符串或对象会被转化成查询字符串加到URL后面，如果不是字符串会被JSON序列化
4、data字符串或者对象这个对象包含了被当做消息体发送给服务器的数据，一般在POST请求中使用，并且从angular1.3开始可以在POST请求里发送二进制数据
如varblob=newBlob({name:’张三’});$http({method:’get’,url:’/‘,data:blob});
5、headers对象在我们做POST跨域和后台配合的时候就用到了headers，其代表随请求发送的HTTP头字符串
6、xsrfHeaderName字符串保存XSFR令牌的HTTP头的名称
7、xsrfCookieName字符串保存XSFR令牌的cookie的名称
8、transformRequest函数或函数组用来对HTTP请求头和体信息进行转换，并返回转化后的版本，通常用于在请求发送给服务器之前对其序列化
9、transformResponse函数或函数组用来HTTP响应头和响应体信息进行转换，并返回转化后的版本，通常用来反序列化
10、cache布尔或缓存对象如果设置为trueangularjs会用默认的$http缓存对GET请求进行缓存
11、timout数值或者promise对象，如果为数值那么请求会在指定的毫秒后结束(会跳到失败的error方法里)，如果为对象那么promise对象在被resolve时请求会被中止，方法执行完毕再执行请求
12、responseType字符串该选项会在请求中设置XMLHttpResponseType属性有以下类型：“”字符串默认，”arraybuffer”(arraybuffer)，”blob”(blob对象)，“document”(HTTP文档)，”json“(从JSON对象解析出来的json字符串)，”text“(字符串)，”moz-blob“(Firefox的接收进度事件)，”moz-chunked-text“(文本流)，”moz-chunked-arraybuffer”(arraybuffer流)
$http服务的快捷方法
$http提供了一些快捷方法让我们使用，一共有六个(其实是六种请求模式)
1、$http.get(url字符串，config可选的配置-对象类型)返回HttpPromise对象
2、$http.delete(url字符串，config可选的配置-对象类型)返回HttpPromise对象
3、$http.head(url字符串，config可选的配置-对象类型)返回HttpPromise对象
4、$http.jsonp(url字符串，config可选的配置-对象类型)返回HttpPromise对象
5、$http.post(url字符串，data对象或字符串，config可选的配置-对象类型)返回HttpPromise对象
6、$http.put(url字符串，data对象或字符串，config可选的配置-对象类型)返回HttpPromise对象
$http({
url:url,//请求的url路径
method:method,//GET/DELETE/HEAD/JSONP/POST/PUT
params:params,//转为?param1=xx1?m2=xx2的形式
data:data//包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
}
}).success(function(response,status,header,config,statusText){
//成功处理
}).error(function(data,header,config,status){
//错误处理
});
特别注意：
1.请求参数说明：
url:url,//请求的url路径
method:method,//GET/DELETE/HEAD/JSONP/POST/PUT
params:params,//转为?param1=xx1?m2=xx2的形式
data:data//包含了将被当做消息体发送给服务器的数据，通常在POST请求时使用
2.响应参数说明：
response---响应体，即：要请求的数据
status---HTTP状态码
header---头信息
config---用来生成原始请求的完整设置对象
statusText---相应的HTTP状态文本
3.缓存HTTP请求
默认情况下，$http服务不会对请求进行本地缓存。在发送单独请求时，可通过向$http请求传递一个布尔参数来启用缓存
eg:
$http.get({‘/api/users.json‘,{cache:true}})
.success(function(data){})
.error(function(data){})
解析：
第一次发送请求时，$http服务会向/api/users.json发送一个GET请求，
第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTPGET请求
设置启动缓存后，AngularJS默认会使用$cacheFactory，这个服务在AngularJS启动时自动创建
如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。
1.GET方式---params参数会转为?param1=xx1?m2=xx2的形式
1.$http请求：
$http({
url:"/api/users.json",
method:‘GET‘,
params:{
‘username‘:‘jay‘
}
}
}).success(function(response,status,headers,config){
/*response--成功返回的数据
status--状态码
headers--头信息
config--其他信息
*/
}).error(function(response){
}
});
2.快捷请求：
$http.get(url,[config])
.success(function(data){})
.error(function(data){});
2.POST方式
$http({method:‘POST‘,params:{id:123},data:{name:‘john‘,age:27},url:"/mypath"})
.success(function(response,status,headers,config){
//doanythingwhatyouwant;
})
.error(function(response,status,headers,config){
//doanythingwhatyouwant;
});
2.快捷方式：
$http.post(url,$scope.formData).success(function(response,status,headers,config){
......
}).error(function(response){
......
});
3.$http提交表单---与SpringMVC交互，使用这种方式
通用方式：
$http({
method:"POST",
url:url,
headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘},
data:$.param($scope.formData)
}).success(function(result){
}).error(function(result){
});
快捷方式：
$http.post(url,$scope.formData)
.success(function(result){
})
.error(function(result){
});
eg:
vardata={
"server":$scope.server,
"time":$("#time").val(),
"day":day
}
$http({
method:"post",
url:ctx+‘/player/lossPlayer/list.htm‘,
headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘},
data:$.param(data)
}).success(function(result){
if(result.tip!=undefined){
//当前绑定的数据清空
$scope.players=[];
alert(result.tip);
}else{
console.log(result.json);
$scope.players=$.parseJSON($.parseJSON(result.json).players);
}
});
4.使用$http指定的方法发送HTTP请求：
get(url,[config]);
delete(url,[config]);
post(url,data,[config]);
put(url,data,[config]);
5.发送jsonp请求：
为了发送JSONP请求，url中必须包含JSON_CALLBACK参数，jsonp(url,config)其中config是可选的
eg:
varpromise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

angularjs中的$http详解

原文地址：https://www.cnblogs.com/benmumu/p/9025113.html

angularjs中的$http详解

知识推荐