AngularJS封装$http.post()实例详解

  AngularJS封装$http.post()实例详解

用了不是很长的时间跟了一个移动APP项目，用的是ionic + AngularJS + cordova框架，其间遇到过挺多问题，其中一个就是对Ajax的封装问题。

其实针对封装问题一直以来就没停止过谈论，不同的项目也有不同的需求，举个典型的例子，我在做这个项目的时候因为一开始没有考虑封装问题所以被批评了，而我的一个朋友却因为封装了受到了批评……很尴尬不是么。

那么对于是否要封装这个问题，究竟该怎么界定？其实这不是一个很复杂的问题，归根到底就是一个收益比率的问题，如果项目规模不是很大，那么过多考虑封装问题本身就没什么意义，对于项目的收益极低；而对于规模大的项目来说，如果不封装，那么潜在的风险就高得多，所以前期的投入也是值得的。

当然这个问题并不是我这样一个小白能掰扯清楚的事情，今天就来说说如果考虑封装的话，那么我会怎么处理。

angularjs中提供了一个服务http，它用来处理Ajax请求，这里我假设读者是了解angularjs的，所以直奔主题：对于post请求该如何处理封装。首先我需要确定一个事情，我能否排除所有使用者（项目团队成员）的个性化需求（需特殊处理的情况）。如果我不能，那么我该如果开放接口才能将post请求还原，所以我需要一个出口返回http.post()。

第二点，我需要考虑每一个使用者在应答到来时如何处理结果，针对success和error两种情况，我需要为他们提供一个处理逻辑的入口。

综合上面两点，我大概有了思路，我需要定义一个服务（公共服务），并且提供一个myPost方法，其中我允许使用者定义响应的回调，并且我允许他们取得更自由的处理方式，给他们一个原原本本的post()。好在js足够灵活，所以我可以这样来写：

service('myHttpService', ['$http', function ($http) {
var myHttpPost = function (url, data, successFn, errorFn) {
}
return {
myHttp: function (url, data, successFn, errorFn) {
return myHttpPost(url, data, successFn, errorFn);
}
}
}]);

如上，我会return内部定义的方法，这个方法允许使用者定义successFn和errorFn，即相应成功和失败的回调，如此一来使用者大可放心的预先编写数据的处理逻辑，而无需关心其他细节。

另外，我允许使用者拿到更加灵活的post()，那么我是这样实现的：

var httpPromise = $http.post(url, data, {timeout: 30000});
if (!angular.isDefined(successFn)) {
return httpPromise;
}

如果使用者并没有定义成功回调，好吧，这层封装就当是不存在，我会把post()丢出去，由调用者自行处理。而如果调用者想预先定义的话，我应当在封装中处理好他们的逻辑：

return httpPromise.then(
function (response) {
if (response.status) {
return successFn(response);
} else {
/*其他处理*/
}
},
function (error) {
if (!angular.isDefined(errorFn)) {
/*其他处理*/
} else {
return errorFn(error);
}
},
function () {
/*无论何总情况下都应该被执行的逻辑*/
}
)

如此对于http.post()的封装基本上就算是完成了。其中有一个地方需要注意，如果我在处理successFn的时候，用了angular.isDefined()判断调用者是否定义了回调，如果没有，我将把处理权利交给调用者，如果已定义我将代为处理。其中then()方法比较有趣，因为http方法返回的是一个promise对象，在响应返回的时候可以通过then()来处理响应，其实完全可以通过promise.success()和promise.error()来处理不同响应状态的回调，但是用then()更好一些，因为它接收到的是完整的响应对象，而success()和error()会对响应对象进行解析，具体的差别读者可以通过console输出来看看。

以上是我对$http.post()的一次简单封装，虽然简陋，但是足以应付大多数情形，并且保留了更自由的处理方式，非常感谢和我一起讨论的朋友们，一起探讨这次的封装，收获很大，也希望对其他朋友所有帮助。

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

• Angularjs中$http以post请求通过消息体传递参数的实现方法
• AngularJS中$http服务常用的应用及参数
• AngularJS $http模块POST请求实现
• 深入理解Angularjs中$http.post与$.post
• angularJS 发起$http.post和$http.get请求的实现方法
• AngularJS下$http服务Post方法传递json参数的实例