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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
Prototype Selector对象学习
Jul 23 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jquery replace方法去空格
May 08 jQuery
JS window对象简单操作完整示例
Jan 14 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 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
PHP中的正规表达式(二)
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python with的用法
2014/08/22 Python
python实现合并两个数组的方法
2015/05/16 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python远程linux执行命令实现
2020/11/11 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
Structs界面控制层技术
2013/10/11 面试题
元旦联欢会主持词
2014/03/26 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
个人承诺书格式
2014/06/03 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
拾金不昧感谢信
2015/01/21 职场文书
工资证明范本
2015/06/12 职场文书
导游词之青城山景区
2019/09/27 职场文书