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() # Angular # JS # $http.post()详细介绍 # 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法 # 对比分析AngularJS中的$http.post与jQuery.post的区别 # Angularjs中$http以post请求通过消息体传递参数的实现方法 # 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法 # AngularJS下$http服务Post方法传递json参数的实例 # AngularJS $http模块POST请求实现 # AngularJS $http post 传递参数数据的方法 # angularJS 发起$http.post和$http.get请求的实现方法 # 深入理解Angularjs中$http.post与$.post # Angular利用HTTP POST下载流文件的步骤记录 # 的是 # 回调 # 可以通过 # 我在 # 我会 # 调用者 # 这个问题 # 就没 # 用了 # 提供一个 # 是一个 # 我是 # 他们的 # 也有 # 所以我 # 原原本本 # 和我 # 两种 # 我对 # 朋友们

返回目录在线咨询

上一篇：建站服务器的SSL证书是否必要？它能带来哪些好处？
下一篇：Python与C程序间管道通信：深入理解文件描述符继承性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求