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


Posted in Javascript onMay 06, 2017

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

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

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
Javascript实现页面滚动时导航智能定位
May 06 #Javascript
JavaScript实现打地鼠小游戏
Apr 23 #Javascript
简单实现jQuery弹幕效果
May 06 #jQuery
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python 绘制可视化折线图
2020/07/22 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
信访维稳工作汇报
2014/10/27 职场文书
使用JS实现简易计算器
2021/06/14 Javascript