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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
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中json_encode中文编码问题分析
2011/09/13 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
php post换行的方法
2020/02/03 PHP
Javascript模板技术
2007/04/27 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python中super关键字用法实例分析
2015/05/28 Python
pygame实现简易飞机大战
2018/09/11 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
django 简单实现登录验证给你
2019/11/06 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
数学复习课教学反思
2016/02/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
导游词之五台山
2019/10/11 职场文书
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android