实例详解AngularJS封装$http.post()-js教程-PHP中文网

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

怪我咯

发布： 2017-06-27 11:52:12

原创

1548人浏览过

这篇文章主要介绍了 angularjs封装$http.post()实例详解的相关资料,需要的朋友可以参考下

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

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

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

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

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

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

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

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

综合上面两点，我大概有了思路，我需要定义一个服务（公共服务），并且提供一个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()的详细内容，更多请关注php中文网其它相关文章！