无为清净楼资源网

关于二次封装jquery ajax办法示例详解
网络编程 2024/11/15 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

前言

Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML

AJax所涉及到得技术：

       1.使用CSS和XHTML来表示。

       2. 使用DOM模型来交互和动态显示。

       3.使用XMLHttpRequest来和服务器进行异步通信。(核心)

       4.使用javascript来绑定和调用。

在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaquest 的基础上封装了 $.ajax 办法进行通信， $.ajax 办法实用性非常强，又非常简单易用。 本次二次封装 query ajax，参考 express 可以添加中间件处理数据，返回 Promise（Defferd） 对象，减少回调， 写 ajax 更加简洁、优雅。

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

大部分的时候我们只需要传入 url 和 data， 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 ｛code: 200, data:{}, err_msg:''｝

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒， 整个项目下来也太冗余了，

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

为了解决这个问题，我们用一个函数再次封装 $.ajax， 把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}

promise

用 util.ajax 代替 $.ajax 使用就可以减少了业务错误的判断啦。 我们再来完善下， 不使用回调的方式，使用 promise 的方式调用, 减少回调，让代码更清晰。

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}


// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })

中间件

这是一个公共的办法，但是有时候我们需要处理差异化啊， 我们参考 express 引入一个中间件来解决差异化问题。

util.ajax = function(obj, middleware) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })

 // 添加中间件
 if(!middleware) {
  middleware = function(){};
 }
 return deferred.done(middleware).fail(function (err) {
  message({
   content: err,
   type: 'error',
   showLeftIcon: true,
   duration: 5000
  });
 });
}

// 调用
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
var middleware = function(data) {
 data.forEach(function(item){
  item.fullName = item.firstName + item.lastName
 })
}
util.ajax(obj, middleware)
 .done(function(data){
  console.log(data.fullName)
 })

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

标签：
jquery,ajax,二次封装,jquery,ajax,封装,jquery,ajax,再封装
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接