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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue实现简单瀑布流布局
May 28 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购物网站支付paypal使用方法
2010/11/28 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python实现KNN近邻算法
2020/12/30 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
欢送退休感言
2014/02/08 职场文书
小学英语课后反思
2014/04/26 职场文书
模具专业求职信
2014/06/26 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS