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延迟加载
Mar 09 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python关闭windows进程的方法
2015/04/18 Python
Python多进程同步简单实现代码
2016/04/27 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
积极向上的团队口号
2014/06/06 职场文书
2014年项目工作总结
2014/11/24 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Golang连接并操作MySQL
2022/04/14 MySQL