進入個人部落格 Eighteen Blog
前面有文章寫過angular的$http請求的簡單書寫和使用。
回顧一下:
var Server = angular.module("Server", []);
Server.service("Api", ["$http", function ($http) {
return {
getTest : function (params, callback) {
$http({
url: 'www.baidu.com?name=xxx&passwd=xxx',
method: 'GET'
}).success(callback);
},
postTest : function (data, callback) {
$http({
url: 'www.baidu.com',
data: data,
method: 'POST'
}).success(callback);
}
}]);
var App = angular.module("App", [ "Server"]);
App.controller('Ctrl', ['$scope', 'Api',
function($scope, Api) {
Api.getTest("?name=xxx&passwd=xxx", function(res){
//res為傳回值
alert("請求成功!")
});
Api.postTest({name: xxx, passwd: xxx}, function(res){
//res為傳回值
alert("請求成功!")
});
}]);
這裡以GET和POST請求為例。首先我們需要在APP中注入Server這個子產品,才能使用裡面的service服務Api,如上代碼所示,注入Server之後我們就可以在控制器Ctl裡面注入Api服務,然後使用我們之前定義好的接口。
- GET請求中params 代表了?之後的參數,即 params == ‘?name=xxx&passwd=xxx’,這樣就可以通過傳參的方式把參數加入到位址上,callback是請求成功後的回調,是個function,我們可以在裡面列印出請求成功的傳回值。
- POST請求中data代表請求參數,傳入之後直接請求即可,其他跟get請求類似。
error
還有一點需要說的是http請求有時候會失敗,當我們http請求失敗的時候,将不會再調用success回調函數,而是會進入error回調,下面我就寫一下http請求的success和error同時存在的寫法。
var Server = angular.module("Server", []);
Server.service("Api", ["$http", function ($http) {
return {
getTest : function (params, successCallback, errorCallback) {
$http({
url: 'www.baidu.com?name=xxx&passwd=xxx',
method: 'GET'
}).then(successCallback, errorCallback);
}
}]);
var App = angular.module("App", [ "Server"]);
App.controller('Ctrl', ['$scope', 'Api',
function($scope, Api) {
Api.getTest("?name=xxx&passwd=xxx", function(res){
//res為傳回值
alert("請求成功!")
}, function(res){
//res為傳回值
alert("請求失敗!")
});
}]);
用法幾乎一樣,隻不過把success(callback)改成了then(callback1, callback2).然後在調用的時候再加入一個function即可。
最簡單的get寫法
$http({
url: 'www.baidu.com?name=xxx&passwd=xxx',
method: 'GET'
}).success(callback);