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 03 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
javascript模块化简单解析
Apr 07 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
详解js实时获取并显示当前时间的方法
May 10 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
关于ES6尾调用优化的使用
Sep 11 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 session安全问题分析
2011/06/24 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP实现微信对账单处理
2018/10/01 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
企划经理的岗位职责
2013/11/17 职场文书
银行求职信范文
2014/05/26 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python