首先這里我簡單寫個例子來方便您的理解
var request = { post: function() { var errorCallback = { error: function(f) { this.fun = f; }, fun: function(data) {} }; successCallback = { success: function(f) { return this.fun = f, console.log(this.fun), errorCallback; }, fun: function(data) { console.log(data) } }; returnData = { wsscat: "hello" }; //成功 //var a = successCallback.fun(returnData); a = successCallback.fun; setTimeout('a(returnData)', 1000) return successCallback; } } request.post().success(function(data) { console.log("123"); console.log(data); }) console.log("wscat's test");這里首先要理解一點很重要的就是異步回調，Javascript的異步回調其實就兩個常用方法，
setTimeout定時這類和ajax請求這類
上面代碼跟angular的request服務類似，首先是這個request對象，就相當于angular注入request服務之后返回的request對象
這個對象寫了一個post方法，而post方法里面這有兩個回調對象分別是
errorCallback和successCallback
還有一個模擬ajax請求返回的returnData對象
returnData = { wsscat: "hello" };這個在angular里面則是ajax請求服務器返回給你的json對象
我們看看這段代碼執行之后會log出什么的信息，如下圖
如果熟悉Javascript的話這里不難理解，首先是輸出的函數信息是因為success()函數里面的console.log(this.fun)這句
request.post().success()
success()里面首先this.fun = f這句是，把匿名的回調函數賦給successCallback對象里面的fun方法，保存起來讓后面setTimeout進行回調
所以我們可以看到首先執行出來的是打印出來的回調函數，然后就是代碼最后一句的
console.log("wscat's test"); 明白了上述這個流程之后就可以很好的理解angular封裝的request服務這一塊
只不過angular里面的回調不是setTimeout回調，而是換成了$http回調而已
$http.get(url).success(function(data, status, headers, config) {//code})而$http請求又因為根據返回的成功或者失敗把數據
用相應的方法帶到我們放到了被匿名回調函數覆蓋，對象successCallback的fun里面
而帶數據到fun里面就是下面這兩句
successCallback.fun(returnData); errorCallback.fun(returnData);
后面我再深入說一下
$http.get(url).success(function(data, status, headers, config) {//code})data：這個不用再多敘述了，我們上面做了這么多其實就是想拿服務器返回給我們的data
status：http響應狀態碼，這個是很基礎的東西，但我還是簡單說說
200：不用懷疑就是請求成功的意思
304：就是你請求已經被允許的情況下，服務器發現你需要的東西還是跟之前一樣沒變，則返回給你304
404：請求失敗了，請求的資源再服務器沒有發現
500：看到5一般就是服務器出錯了
?？吹降木瓦@幾個吧
header：頭信息
config：生成原始請求的設置對象，如下圖
再往下看，其實post請求和get請求區別是不大的
只是這里get更簡單明了，你直接傳url過來就行了，相比post請求接口還要帶上各種需要請求的參數
但再仔細了解的話，其實post跟get在這里其實都走get請求
Request服務源碼
.service('Request', [ '$http', '$cookies', '$rootScope', '$window', '$cookieStore', '$location', function($http, $cookies, $rootScope, $window, $cookieStore, $location) { var request = { post: function(api, map, successCallback) { $rootScope.dataLoadCount++; $rootScope.isLoading = $rootScope.dataLoadCount != 0; var url = '../test.php?api=' + encodeURIComponent(api); //console.log('[http requestURL]:' + api); //~ alert(api); var json = '{}'; if (angular.isDefined(map)) { json = angular.toJson(map); } //console.log('[http requestJson]:' + json); url += '&data=' + encodeURIComponent(json); var errorCallback = { error: function(f) { this.fun = f; }, fun: function(data) {} }; var successCallback = { success: function(f) { return this.fun = f, errorCallback; }, fun: function(data) {} }; $http.get(url).success(function(data, status, headers, config) { console.log(config); // this callback will be called asynchronously // when the response is available $rootScope.dataLoadCount--; $rootScope.isLoading = $rootScope.dataLoadCount != 0; //console.log('[http success responseData]:' + angular.toJson(data)); //~ alert('[http success responseData]:'+angular.toJson(data)); var returnData = { code: data.state.code, msg: data.state.msg, data: data.data }; if (returnData.code == 1) { successCallback.fun(returnData); } else { if (returnData.code == 99) { alert(returnData.msg); $cookieStore.remove('token'); $cookieStore.remove('userid'); delete $cookies.token; delete $cookies.userid; $rootScope.isLogined = false; $rootScope.$broadcast('refreshFooter'); switch ($rootScope.isWeiXinLogin()) { case true: $location.path('login'); break; case false: $location.path('loginWebapp'); break; } return; } errorCallback.fun(returnData); } }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $rootScope.dataLoadCount--; $rootScope.isLoading = $rootScope.dataLoadCount != 0; //console.log('[http error responseData]:' + angular.toJson(data)); //~ alert('[http error responseData]:status:'+status); var returnData = { code: 0, msg: '網絡請求失敗', data: {} }; errorCallback.fun(returnData); }); return successCallback; }, get: function(url, successCallback) { $rootScope.dataLoadCount++; $rootScope.isLoading = $rootScope.dataLoadCount != 0; var errorCallback = { error: function(f) { this.fun = f; }, fun: function(data) {} }; var successCallback = { success: function(f) { return this.fun = f, errorCallback; }, fun: function(data) {} }; $http({ method: 'GET', url: url }).success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available $rootScope.dataLoadCount--; $rootScope.isLoading = $rootScope.dataLoadCount != 0; //console.log('[http success responseData]:' + data); var returnData = { code: 1, msg: '請求成功', data: data }; successCallback.fun(data); }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $rootScope.dataLoadCount--; $rootScope.isLoading = $rootScope.dataLoadCount != 0; //console.log('[http error responseData]:' + angular.toJson(data)); var returnData = { code: 0, msg: '網絡請求失敗', data: "" }; errorCallback.fun(returnData); }); return successCallback; } } return request; }])以上這篇Angular服務Request異步請求的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
