angularjs封装$http为factory的方法


Posted in Javascript onMay 18, 2017

angularjs有本身封装的ajax服务$http,因为用惯了jQuery的ajax,所以,自己封装了一下angularjs的$http,代码如下

app.factory('dataFactory', function ($http, $q){ 
  var factory = {}; 
  factory.getlist = function(endpoint, method, headers, params) { 
    var defer = $q.defer(); 
    if (method == 'GET') { 
      $http({ 
        url: endpoint, 
        method: "GET", 
        headers: headers, 
        params: params, 
      }).success(function (data) { 
        defer.resolve(data); 
      }). 
      error(function (data, status, headers, config) { 
        // defer.resolve(data); 
        defer.reject(data); 
      }); 
    } else { 
      $http({ 
        url: endpoint, 
        method: method, 
        headers: headers, 
        data: params, 
      }).success(function (data) { 
        defer.resolve(data); 
      }). 
      error(function (data, status, headers, config) { 
        // defer.resolve(data); 
        defer.reject(data); 
      }); 
    } 
    return defer.promise; 
    }; 
    return factory; 
});

在controller中引入dataFactory和$http即可使用更方便的调用ajax,一般情况下headers为

headers = {'Content-Type': 'application/json'};

params为一个json字符串

然后调用

dataFactory.getlist("/api/checkDuplicate", 'GET', headers, params).then(function(data) { 
//success函数 
},function(data){ 
//error函数 
})

但是其中又一次在项目中,后台框架使用的是Struts框架,在一个Python中使用的很好的dataFactory,在这里的后台取不到数,最后发现是应为header设置不对,而且params的格式也不正确,可以把header修改为

headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'};

上面dataFactory中else添加转换params代码:

var param = function(obj) { 
        var query = '', name, value, fullSubName, subName, subValue, innerObj, i; 
 
        for(name in obj) { 
         value = obj[name]; 
 
         if(value instanceof Array) { 
          for(i=0; i<value.length; ++i) { 
           subValue = value[i]; 
           fullSubName = name + '[' + i + ']'; 
           innerObj = {}; 
           innerObj[fullSubName] = subValue; 
           query += param(innerObj) + '&'; 
          } 
         } 
         else if(value instanceof Object) { 
          for(subName in value) { 
           subValue = value[subName]; 
           fullSubName = name + '[' + subName + ']'; 
           innerObj = {}; 
           innerObj[fullSubName] = subValue; 
           query += param(innerObj) + '&'; 
          } 
         } 
         else if(value !== undefined && value !== null) 
          query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; 
        } 
        return query.length ? query.substr(0, query.length - 1) : query; 
        }; 
      $http({ 
        url: endpoint, 
        method: method, 
        headers: headers, 
        data: param(params), 
      }).success(function (data) { 
        defer.resolve(data); 
      }). 
      error(function (data, status, headers, config) { 
        // defer.resolve(data); 
        defer.reject(data); 
      });

只是个人觉得这个方式比较方便,记录下来,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
Jquery中map函数的用法
Jun 03 Javascript
js实现前端分页页码管理
Jan 06 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
在vue里使用codemirror遇到的问题
Nov 01 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
bootstrap表单示例代码分享
May 18 #Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 #Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
You might like
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
深入PHP异步执行的详解
2013/06/03 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
js微信分享API
2020/10/11 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
简单学习vue指令directive
2016/11/03 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
python实现Windows电脑定时关机
2018/06/20 Python
基于Python绘制个人足迹地图
2020/06/01 Python
详解python tcp编程
2020/08/24 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
自我鉴定怎么写
2014/01/12 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书