-
Notifications
You must be signed in to change notification settings - Fork 1
angular http
遇见王斌 edited this page Nov 30, 2020
·
16 revisions
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
这的 successCallback, errorCallback 都是函数，如
function successCallback(response) {$scope.jobs = response.data;},
两个回调函数都支持一个 response 参数，该参数有如下属性
data: 服务器的响应数据
status: 响应状态码
headers: 响应头
config: 请求的 config 对象
statusText: 响应的状态文本
$http.get('app/list',
{
params:params
}
).then(
function successCallback(response)
{
$scope.myData = response.data.data.list;
$scope.gridOptions.totalItems = response.data.data.total;
if (response.data.code != 0) {
$scope.pop('error', '', response.data.message);
return;
}
if ($scope.gridOptions.totalItems == '0') {
$scope.pop('warning', '', '未查询到数据');
}
},
function errorCallback(response)
{
console.log(response.data)
$scope.pop('error', '', '服务端异常');
}
);
angular.module('name')
.controller('ctrlName', ['$scope', '$http', function($scope, $http) {
// post
$http.post(url, {
key1 : value1,
key2 : value2,
// ...
keyN : valueN
}).success(function(data, status, headers, config) {
// TODO
}).error(function(data, status, headers, config) {
// TODO
});
// put
$http.put(url, {
key1 : value1,
key2 : value2,
// ...
keyN : valueN
}).success(function(data, status, headers, config) {
// TODO
}).error(function(data, status, headers, config) {
// TODO
});
// get
$http.get(url, {
key1 : value1,
key2 : value2,
// ...
keyN : valueN
}).success(function(data, status, headers, config) {
// TODO
}).error(function(data, status, headers, config) {
// TODO
});
// delete
$http.delete(url, {
key1 : value1,
key2 : value2,
// ...
keyN : valueN
}).success(function(data, status, headers, config) {
// TODO
}).error(function(data, status, headers, config) {
// TODO
});
}]);
$http.get 请求数据的格式
$http.get(URL,{
params: {
"id":id
}
})$http.post 请求数据的格式
$http.post(URL,{
"id":id
})对于所有通过 $http 服务发出的请求和收到的响应来说，AngularJS 都会进行一些基本的转换：
- 转换请求：如果请求的配置对象属性中包含 JS 对象，这个对象就序列化成 JSON 格式。
- 转换响应：如果检测到了 XSRF 前缀，则直接丢弃。如果检测到了 JSON 响应，则使用 JSON 解析器对它进行反序列化。
只需要编写处理请求逻辑，异常请求处理逻辑部分统一由模块处理，同时可以设置是否进行弹出消息（使用 toaster）
文件：src/static/js/services/services.js
借鉴：https://github.com/inpanel/inpanel/blob/master/static/js/services.js
普通请求（默认成功后会弹出消息，如果响应 body 中有 stat 属性的话）
Request.get('/bianque/api?item_name=xxx_status',function(res){
$scope.group_status = res;
});
Request.get('/bianque/api?item_name=' + 'xxx_status',function(res){
$scope.group_status = res;
});
var params = {};
params['item_name'] = 'xxx_status'
//item_name=xxx_status
$httpParamSerializer(params)
设置不进行弹出消息
Request.get("/bianque/api?item_name=xxx_status",function(res){
$scope.group_status = res;
},false,true);
数组类型 像 {sites:['google', 'Facebook']}:
$httpParamSerializer 会返回 sites=google&sites=facebook
$httpParamSerializerJQLike 会返回 sites[]=google&sites[]=facebook
对象类型 像 {address: {city: 'LA', country: 'USA'}}:
$httpParamSerializer 会返回 address={"city": "LA", country: "USA"}
$httpParamSerializerJQLike 会返回 address[city]=LA&address[country]=USA
普通请求
Request.post("/bianque/api",
{
'item_name':'xxx_status'
},
function(res){
$scope.group_status = res;
});
设置不进行弹出消息
可参考 get 请求示例
response 方式 1
{
"stat": "OK", // "OK" 或者其他失败信息
"data": {} // data
}
response 方式 2
{
"code": 0
"message": "OK"
"data": {}
}
angular.module('appservices', ['toaster']).factory('Request', ['$http', '$rootScope', '$location', '$timeout', 'toaster',
function($http, $scope, $location, $timeout, toaster) {
//--------------- 提示信息 ---------------
$scope.toaster = {
type: 'success',
title: 'Title',
text: 'Message'
};
$scope.pop = function(type, title, text) {
toaster.pop(type, '', text);
};
//--------------- 提示信息 ---------------end
var Request = {};
var _successFuncBinder = function(callback, quiet) {
return function(data) {
$scope.processing = false;
// 如果返回 response 中含有 stat 属性，则 stat 为非 "OK" 时，则 stat 内容为异常信息
if (!quiet && data.stat) {
if (data.stat == "OK") {
$scope.pop('success', '', data.stat);
} else {
$scope.pop('error', '', data.stat);
}
}
// 如果返回 response 中含有 code 属性，则 code 为非 0 时，则 message 内容为异常信息
if (!quiet && data.code) {
if (data.code == 0) {
$scope.pop('success', '', data.message);
} else {
$scope.pop('error', '', data.message);
}
}
if (callback) callback.call(null, data);
};
};
var _errorFuncBinder = function(callback, quiet) {
return function(data, status) {
$scope.processing = false;
if (!quiet && callback) {
if (!callback.call(null, data, status)) return;
}
if (status == 401) {
$scope.pop('wait', '', '正尝试自动登录');
} else {
$scope.pop('error', '', '发生未知错误！');
}
};
};
Request.setProcessing = function(processing) {
$scope.processing = processing;
};
Request.get = function(url, callback, errcallback, quiet) {
$scope.processing = true;
var rurl = url;
//if (rurl.indexOf('?') > 0)
// rurl += '&' + Math.random();
//else
// rurl += '?' + Math.random();
$http.get(rurl).success(_successFuncBinder(callback, quiet)).error(_errorFuncBinder(errcallback, quiet));
};
Request.post = function(url, data, callback, errcallback, quiet) {
$scope.processing = true;
$http.post(url, data).success(_successFuncBinder(callback, quiet)).error(_errorFuncBinder(errcallback, quiet));
};
return Request;
}])