关于二次封装jquery ajax办法示例详解
|
前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术： 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。(核心) 4.使用javascript来绑定和调用。 在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaquest 的基础上封装了
$.ajax({
url: url,data: data,dataType: 'json',type: 'get',success: new Function(){},error: new Function(){},.......
})
大部分的时候我们只需要传入 url 和 data， 就可以获取到我们想到的数据了。 痛点 但是在项目中使用 就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。 从返回 data,变成 了 如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒， 整个项目下来也太冗余了，
$.ajax({
url: url,success: function(data){
if(data.code == 200) {
dosomething()
} else {
alert(data.err_msg);
}
}
})
为了解决这个问题，我们用一个函数再次封装
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 = function(obj) {
var deferred = $.Deferred();
$.ajax({
url: obj.url || '/interface',}).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',}).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',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)
})
总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程小技巧的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |