基于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写一个判断,简直要疯。
基于jquery的ajax方法封装的更多相关文章
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- ajax系列之用jQuery的ajax方法向服务器发出get和post请求
打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...
- 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- 基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: ...
随机推荐
- expdp实现oracle远程服务器导出到本地
expdp导出 expdp user/pwd@orcl directory=dd network_link=dblink dumpfile=fileName.dmp //user为本地用户名 //ne ...
- GOF23设计模式之适配器模式(Adapter)
一.适配器模式概述 将一个类的接口转换成客户可用的另外一个接口. 将原本不兼容不能在一起工作的类添加适配处理类,使其可以在一起工作. 二.适配器模式场景 要想只有USB接口的电脑想使用PS/2接口的键 ...
- 用活firewalld防火墙中的zone
原文地址:http://www.excelib.com/article/290/show firewalld中zone的含义学生前面已经给大家介绍过了,说白了一个zone就是一套规则集.可是什么时候该 ...
- java代码--------实现位运算符不用乘除法啊
总结:<<:乘法 >>:除法 package com.mmm; public class dfd { public static void main(String[] args ...
- MySQL添加数据库的唯一索引的几种方式~
创建表时直接设置: DROP TABLE IF EXISTS `student`;CREATE TABLE `student` ( `stu_id` int(11) NOT NULL AUTO_IN ...
- hadoop从调整GC到关键Counter计算原理分析
hadoop集群中发现使用Parallel Scavenge+Parallel Old收集器组合进行垃圾收集(这也是server端jvm默认的GC方式)时CPU占用可能会非常高,偶尔会出现爆满的状态 ...
- STL sort
STL的sort()算法,数据量大时采用Quick Sort,分段递归排序,一旦分段后的数据量小于某个门槛,为避免Quick Sort的递归调用带来过大的额外负荷,就改用Insertion Sort. ...
- python学习 (三十) python的函数
1: 函数参数默认值 def method1(p1 = , p2 = ): // 函数有两个参数,并且都有默认值 return p1 + p2 print(method1()) print(meth ...
- 在centos7上搭建mongodb副本集
1.安装副本集介绍 副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的 ...
- Tkinter Radiobutton
Python GUI - Tkinter Radiobutton: 这个小部件实现了多项选择按钮,这是一种方式向用户提供许多可能的选择,让用户选择只是其中之一. 这个小部件实现了多项选择按钮,这是 ...