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 面向对象思想 附源码
Jul 07 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js中settimeout方法加参数
Feb 28 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 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抽象工厂模式(Elgg)
2010/03/21 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Javascript Global对象
2009/08/13 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python随机数random模块使用指南
2016/09/09 Python
python基础之入门必看操作
2017/07/26 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
店长助理岗位职责
2013/12/13 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
《搭石》教学反思
2016/02/18 职场文书
乡镇团代会开幕词
2016/03/04 职场文书