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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
js实现简单锁屏功能实例
May 27 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
简单的Vue SSR的示例代码
Jan 12 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 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的ASP防火墙
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
jquery五角星评分插件示例分享
2014/02/21 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
党员违纪检讨书
2014/02/18 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书