前端开发框架总结之Angular实用技巧（四）

上文讲了Angular中路由的相关的知识，掌握了这些，我们就可以构建比较复杂的页面结构和UI交互了。今天我们再来介绍下angular $http请求相关的知识。

• angular网络请求

angular的网络请求方式在不同的版本是不一样的，但方式大差不差。直接上代码，大家参考这个方式写就行了。

[code]    function doAuth() {
$http({
method: 'POST',
headers:{'Content-Type':'application/json-rpc'},
url: Constants.zabbixUrl,
data: JSON.stringify(reqObj),
}).success(function(data,status,headers,config){
if(data.result){
Constants.zabbixAuth = data.result;
}
}).error(function(data,status,headers,config){
});
};

我们常用的参数也就这几项。

method：请求方式，包括post get等

headers：请求头信息。

url：请求路径

data：包体中携带的数据。

params：区别于data，这个是get类型的参数，默认的会用$httpParamSerializer进行序列化。

transformRequest:请求数据的头部和包体的“拦截器”,拦截的第一个参数对应的是data所携带的数据，可以对这个数据进行序列化。

在springmvc框架中使用angular的话，前端数据如果是一个对象，如果想要在后台do方法中做到正确的映射，可以把对象放在params中，也可以把对象放在data中，但是要通过transformRequest进行序列化。

另外springmvc中前台请求的头部信息中Content-Type是需要配置成'application/x-www-form-urlencoded;charset=utf-8'的，不能配置成json格式的，否则会造成后台无法接收到数据。

请求成功返回会进入success的回调。失败会进入error的回调。$http返回的是一个promise。

$http请求头的默认配置方式：

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';

$http请求的拦截方式：

[code]  $httpProvider.interceptors.push(['$rootScope', '$q','$timeout','$cookies','Constants', function ($rootScope, $q, $timeout,$cookies,Constants) {
return {
'request': function (config) {
config.headers['X-Requested-With'] = 'XMLHttpRequest';
config.timeout = 30000;
config.cache = false;

if (config.url.search(/log-service-idgen\*/) >= 0) {
return config || $q.when(config);
}

if (config.method == "POST") {
config.headers['USER'] = $cookies.get('account');
config.headers['TOKEN'] = $cookies.get('token');

if (config.url.search(/\?/) >= 0) {
config.url = config.url + "&ver=" + new Date().getTime();
} else {
config.url = config.url + "?ver=" + new Date().getTime();
}
} else if (config.method == "GET") {
if (config.url.search(/\?/) >= 0) {
config.url = config.url + "&ver=" + new Date().getTime();
} else {
config.url = config.url + "?ver=" + new Date().getTime();
}
}
return config || $q.when(config);
},
'requestError': function (rejection) {
return rejection;
},
'response': function (response) {
if (response.headers().sessionstatus == "timeout") {

return {
data: {
result: false,
message: {
errCode: '401',
errDesc: "登录超时，请重新登录!"
}
}
};
} else {
return response || $q.when(response);
}

},
'responseError': function (response) {
if (response.status === 401) {
$rootScope.alertObj = {
isShow: true,
text: "未授权，请先登录！",
fun: function () {
$rootScope.loginUser = {};
$rootScope.changeState('login', {actionType: 1});
}
};
return false;
} else if (response.status === 404) {
$rootScope.alertObj = {
isShow: true,
text: "访问的地址不存在！",
fun: function () {
}
};
return false;

} else if (response.status === 500) {
$rootScope.alertObj = {
isShow: true,
text: "服务器内部异常！",
fun: function () {
}
};
return false;
} else if (response.status === 504) {
$rootScope.alertObj = {
isShow: true,
text: "连接服务超时，请稍后重试！",
fun: function () {
}
};
return $q.reject(response);
} else {
$rootScope.alertObj = {
isShow: true,
text: response.statusText ? response.statusText : "网络异常！",
fun: function () {
}
};
return false;
}
return $q.reject(response);
}
};
}]);

另外说明一点，angular的$http是异步的，没有想jquery中还提供了了同步的配置方式。

有一篇文章对$http参数介绍挺详细的：https://www.geek-share.com/detail/2649098421.html