关于二次封装jquery ajax办法示例详解
前言
Ajax的全称是AsynchronousJavaScriptandXML异步的javaScript和XML
AJax所涉及到得技术：
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。(核心)
4.使用javascript来绑定和调用。
在我们前端处理数据的时候免不了要ajax与后台通信，ajax是通过XMLHttpRequest对象与服务器进行通信的，jquery在XMLHttpReaquest的基础上封装了$.ajax办法进行通信，$.ajax办法实用性非常强，又非常简单易用。本次二次封装queryajax，参考express可以添加中间件处理数据，返回Promise（Defferd）对象，减少回调，写ajax更加简洁、优雅。
$.ajax({
url:url,
data:data,
dataType:'json',
type:'get',
success:newFunction(){},
error:newFunction(){},
.......
})
大部分的时候我们只需要传入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){
vardeferred=$.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('接口出错，请重试');
})
returndeferred.fail(function(err){
alert(err)
});
}
//调用
varobj={
url:'/interface',
data:{
interface_name:'name',
interface_params:JSON.stringify({})
}
};
util.ajax(obj)
.done(function(data){
dosomething(data)
})
中间件
这是一个公共的办法，但是有时候我们需要处理差异化啊，我们参考express引入一个中间件来解决差异化问题。
util.ajax=function(obj,middleware){
vardeferred=$.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(){};
}
returndeferred.done(middleware).fail(function(err){
message({
content:err,
type:'error',
showLeftIcon:true,
duration:5000
});
});
}
//调用
//调用
varobj={
url:'/interface',
data:{
interface_name:'name',
interface_params:JSON.stringify({})
}
};
varmiddleware=function(data){
data.forEach(function(item){
item.fullName=item.firstName+item.lastName
})
}
util.ajax(obj,middleware)
.done(function(data){
console.log(data.fullName)
})
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。