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

站长资源 2024/11/27 佚名

2 1538 2

DDR爱好者之家 Design By 杰米

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()详细介绍

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“AngularJS封装$http.post()实例详解”

暂无评论...

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

jQuery动态追加页面数据以及事件委托详解

JavaScript瀑布流布局实现代码

评论“AngularJS封装$http.post()实例详解”

更新日志

友情链接