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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
小程序实现侧滑删除功能
Jun 25 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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JS验证字符串功能
2017/02/22 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
售后主管岗位职责
2013/12/08 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
秋菊打官司观后感
2015/06/03 职场文书
地雷战观后感
2015/06/09 职场文书
电力培训学习心得体会
2016/01/11 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers