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