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 获取对象 基本选择与层级
May 31 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js脚本实现数据去重
Nov 27 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
js中日期的加减法
May 06 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
node.js文件上传处理示例
Oct 27 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
javascript canvas实现雨滴效果
Jun 09 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版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP如何将XML转成数组
2016/04/04 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python 对象和json互相转换方法
2018/03/22 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
详解django.contirb.auth-认证
2018/07/16 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python 制作简单的音乐播放器
2020/11/25 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
华为c/c++笔试题
2016/01/25 面试题
求职信标题怎么写
2014/05/26 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
承租经营合作者协议书
2014/10/01 职场文书
cypress测试本地web应用
2022/06/01 Javascript