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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jQuery filter函数使用方法
May 19 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 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保存信息到当前Session的方法
2015/03/16 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
白酒市场开发计划书
2014/01/09 职场文书
高一政治教学反思
2014/01/28 职场文书
四群教育工作实施方案
2014/03/26 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers