AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
前言
$http 服務(wù)：只是簡(jiǎn)單封裝了瀏覽器原生的XMLHttpRequest對(duì)象，接收一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)對(duì)象，包含了用來(lái)生成HTTP請(qǐng)求的配置內(nèi)容，這個(gè)函數(shù)返回一個(gè)promise對(duì)象，具有success和error方法。
$http服務(wù)的使用場(chǎng)景：
var promise = $http({
method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json", //請(qǐng)求路徑
params:{'name':'lisa'}, //傳遞參數(shù)，字符串map或?qū)ο?，轉(zhuǎn)化成？name=lisa形式跟在請(qǐng)求路徑后面
data:blob, //通常在發(fā)送post請(qǐng)求時(shí)使用，發(fā)送二進(jìn)制數(shù)據(jù)，用blob對(duì)象。
}).success(function(data){
//響應(yīng)成功操作
}).error(function(data){
//響應(yīng)失?。憫?yīng)以錯(cuò)誤狀態(tài)返回）操作
})
then()函數(shù)：可以使用then()函數(shù)來(lái)處理$http服務(wù)的回調(diào)，then()函數(shù)接受兩個(gè)可選的函數(shù)作為參數(shù)，表示success或error狀態(tài)時(shí)的處理，也可以使用success和error回調(diào)代替：
then(successFn, errFn, notifyFn) ,無(wú)論promise成功還是失敗了，當(dāng)結(jié)果可用之后， then都會(huì)立刻異步調(diào)用successFn或者errFn。這個(gè)方法始終用一個(gè)參數(shù)來(lái)調(diào)用回調(diào)函數(shù)：結(jié)果，或者是拒絕的理由。
在promise被執(zhí)行或者拒絕之前， notifyFn回調(diào)可能會(huì)被調(diào)用0到多次，以提供過程狀態(tài)的提示
promise.then(function(resp){
//響應(yīng)成功時(shí)調(diào)用，resp是一個(gè)響應(yīng)對(duì)象
}, function(resp) {
// 響應(yīng)失敗時(shí)調(diào)用，resp帶有錯(cuò)誤信息
});
then()函數(shù)接收的resp（響應(yīng)對(duì)象）包含5個(gè)屬性：
1. data（字符串或?qū)ο螅?/strong>響應(yīng)體
2. status:相應(yīng)http的狀態(tài)碼,如200
3. headers(函數(shù))：頭信息的getter函數(shù)，可以接受一個(gè)參數(shù)，用來(lái)獲取對(duì)應(yīng)名字的值
4. config(對(duì)象)：生成原始請(qǐng)求的完整設(shè)置對(duì)象
5. statusText:相應(yīng)的http狀態(tài)文本，如"ok"
或者使用success/error方法，使用
//成功處理
promise.success(function(data, status, headers, config){
// 處理成功的響應(yīng)
});
// 錯(cuò)誤處理
promise.error(function(data, status, headers, config){
// 處理非成功的響應(yīng)
});
使用實(shí)例：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$http request test </title>
<script src="../js/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()">
<table>
<thead>
<tr>
<th>名稱</th>
<th>屬性</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in myData">
<td>{{data.name}}</td>
<td>{{data.attr}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
app.js
var myHttpApp = angular.module("myApp",[]);
myHttpApp.controller("myAppController",function($q,$http,$scope){
var deffer = $q.defer();
var data = new Blob([{
"name":"zhangsan"
}])
$scope.loadData = function(){
var promise = $http({
method:"post",
url:"./data.json",
cache: true
}).success(function(data){
deffer.resolve(data);
}).error(function(data){
deffer.reject(data);
})
promise.then(function(data){
$scope.myData = data.data;
})
/*promise.success(function(data){
$scope.myData = data;
})*/
}
})
data.json
[
{"name":"zhangsan","attr":"China"},
{"name":"lisa","attr":"USA"},
{"name":"Bob","attr":"UK"},
{"name":"Jecy","attr":"Jepan"}
]
結(jié)果：
調(diào)用then()函數(shù)時(shí)返回的resp對(duì)象：
總結(jié)
AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)到這就基本結(jié)束了，希望本文的內(nèi)容能對(duì)大家學(xué)習(xí)使用AngularJS有所幫助。如果有疑問可以留言交流。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了angular6開發(fā)steps步驟條組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門效果
本文主要介紹了利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了AngularJS驗(yàn)證、過濾器、指令的相關(guān)知識(shí),angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，具體詳情大家通過本文一起學(xué)習(xí)吧，需要的朋友可以參考下2017-01-01
AngularJS提供了過濾器來(lái)對(duì)輸入輸出數(shù)據(jù)格式化。這篇文章主要介紹了Angularjs過濾器使用的相關(guān)資料,需要的朋友可以參考下2016-05-05
本篇文章主要介紹了Angular4開發(fā)解決跨域問題詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
Web開發(fā)使用Angular實(shí)現(xiàn)用戶密碼強(qiáng)度判別的方法
這篇文章主要介紹了Web開發(fā)使用Angular實(shí)現(xiàn)用戶密碼強(qiáng)度判別的方法,需要的朋友可以參考下2017-09-09
AngularJS模態(tài)框模板ngDialog的使用詳解
這篇文章主要介紹了AngularJS模態(tài)框模板ngDialog的使用詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05
angularjs是javascript的一個(gè)框架，通過script標(biāo)簽添加到網(wǎng)頁(yè)中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下2016-07-07
Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-04-04
基于angular實(shí)現(xiàn)模擬微信小程序swiper組件
這篇文章主要介紹了基于angular實(shí)現(xiàn)模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06