博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于jquery的ajax方法封装
阅读量:6341 次
发布时间:2019-06-22

本文共 2181 字,大约阅读时间需要 7 分钟。

出自  天上云好白http://www.cnblogs.com/fxxkhigh/    基于jquery的ajax方法封装在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要举一个例子,很久很久以前,我的ajax是这么写的:复制代码$.ajax({  url: 'www.baidu.com/getInfo',  type: 'POST',  data: {    name: 'jack',    age: 18  },  dataType: 'json',  success: function(resp){  // callback  },  error: function(err){  // error code  }    });复制代码乍一看挺好没啥问题,但是其实success回调里的逻辑可能很复杂,甚至可能会出现ajax回调里再放一个ajax的情况,那这种写法就很糟糕了,全都杂糅在一起可以进行一个简单的封装,这在之前Deferred对象的随笔里已经有提到复制代码function ajax(url, param, type) {  // 利用了jquery延迟对象回调的方式对ajax封装,使用done(),fail(),always()等方法进行链式回调操作  // 如果需要的参数更多,比如有跨域dataType需要设置为'jsonp'等等,可以考虑参数设置为对象  return $.ajax({    url: url,    data: param || {},    type: type || 'GET'  });}// 链式回调ajax('www.baidu.com/getInfo').done(function(resp) {    // 成功回调  }).fail(function(err) {    // 失败回调  });复制代码但是虽然做到这一步了,问题还是会来,比如我司,成功的回调里还有一层逻辑判断,像这样:复制代码// 我司ajax返回的json数据格式// 当result为false时,msg中往往有错误信息{  result: true,  data: {    name: 'jack'  },  msg: null}ajax('www.baidu.com/getInfo').done(function(resp) {    // 成功回调    if(resp.result){      // 当resp中result为true时的操作      // 往往这个时候要操作处理resp中的data对象信息    }    else{      // 当result为false时的操作,这时往往会根据resp中的另一属性msg来判断具体处理    }  }).fail(function(err) {    // 失败回调  });复制代码问题有二:第一,我每个ajax中都需要写一个同样的相对固定的逻辑判断(每个公司或者项目组可能会有不同,但是就项目本身而言,或者放大了到公司来说必然是固定的),我觉得很烦。第二,如果我只想专注处理数据,比如在成功回调里,我直接拿到要处理要渲染的数据,在失败的回调里我直接拿到错误的代码,有没有这样的可能做进一步的封装。其实这俩问题是一个,总结一句话,就是不想写那么多if,else。有一句话我觉得说得很好,逻辑是守恒的,但如果是可预见的逻辑,是有精简的可能的,我们这种显然属于可预见的逻辑。二次封装利用了延迟对象的then方法,具体看代码:复制代码function handleAjax(url, param, type) {  return ajax(url, param, type).then(function(resp){      // 成功回调      if(resp.result){        return resp.data; // 直接返回要处理的数据,作为默认参数传入之后done()方法的回调      }      else{        return $.Deferred().reject(resp.msg); // 返回一个失败状态的deferred对象,把错误代码作为默认参数传入之后fail()方法的回调      }    }, function(err){      // 失败回调      console.log(err.status); // 打印状态码    });}handleAjax('www.baidu.com/getInfo').done(function(resp){    // 当result为true的回调  }).fail(function(err){    // 当result为false的回调  });复制代码这就把之前很杂揉的代码进一步的的简化,也方便了维护,比如某一天跟你说result不再是布尔值了,直接改成状态码这样的东西了,如果按以前一个ajax写一个判断,简直要疯。

 

转载于:https://www.cnblogs.com/socool-hu/p/5671027.html

你可能感兴趣的文章
Linux学习笔记九
查看>>
linux将程序放到后台执行
查看>>
Jar命令使用
查看>>
webdriver+python下拉框的处理方式
查看>>
jquery小片段
查看>>
浏览上传
查看>>
css3之呼吸灯效果
查看>>
为编写网络爬虫程序安装Python3.5
查看>>
我的友情链接
查看>>
java 获取数组长度
查看>>
shell脚本简单实例
查看>>
RHEL / CentOS Bash命令自动完成功能
查看>>
学习Java的几大网站
查看>>
httpclient调用https webservice(rest) 忽略证书
查看>>
visual studio 出现错误SP324098: 您的浏览器无法完成操作。
查看>>
android.database.StaleDataException
查看>>
你对多线程的理解有多少??
查看>>
saltstack的探索-再次改进管理用户的sls文件来更新root用户的密码
查看>>
我的第一个windows live writer 日志
查看>>
桌面虚拟化IOPS计算方法
查看>>