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 相关文章推荐
页面载入结束自动调用js函数示例
Sep 23 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
jQuery弹框插件使用方法详解
May 26 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
调频问题解答
2021/03/01 无线电
PHP常用编译参数中文说明
2014/09/27 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
pjblog中的UBBCode.js
2007/04/25 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
质检部经理岗位职责
2014/02/19 职场文书
2014年仓库工作总结
2014/11/20 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
申请吧主发表的感言
2015/08/03 职场文书
办公室日常管理制度
2015/08/04 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
PHP使用QR Code生成二维码实例
2021/07/07 PHP
python中的sys模块和os模块
2022/03/20 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers