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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 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 面向对象的一个例子
2011/04/12 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
如何打开php的gd2库
2017/02/09 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
Python合并多个装饰器小技巧
2015/04/28 Python
使用python绘制常用的图表
2016/08/27 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
python多任务及返回值的处理方法
2019/01/22 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
python Cartopy的基础使用详解
2020/11/01 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
教师师德承诺书
2014/03/26 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
Python入门之基础语法详解
2021/05/11 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python