jquery 封装ajax方法,关于二次封装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 办法进行通信, $.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办法示例详解相关推荐
- python二元多次函数拟合_对python实现二维函数高次拟合的示例详解
在参加"数据挖掘"比赛中遇到了关于函数高次拟合的问题,然后就整理了一下源码,以便后期的学习与改进. 在本次"数据挖掘"比赛中感觉收获最大的还是对于神经网络的认识 ...
- HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
- 三菱FX5U系列PLC之间进行UDP以太网通信的具体方法示例详解(二)
三菱FX5U系列PLC之间进行UDP以太网通信的具体方法示例详解(二) 假设有A.B两个FX5U系列的PLC要进行UDP以太网通信,进行数据交互. 上次和大家分享了两台FX5U系列PLC进行UDP以太 ...
- 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高...
第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...
- Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验
Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...
- mysql去重函数的使用方法_MySQL中使用去重distinct方法的示例详解
一 distinct 含义:distinct用来查询不重复记录的条数,即distinct来返回不重复字段的条数(count(distinct id)),其原因是distinct只能返回他的目标字段,而 ...
- 微信小程序学习:(二)app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解 项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
- 深度学习之图像分类(二十八)-- Sparse-MLP(MoE)网络详解
深度学习之图像分类(二十八)Sparse-MLP(MoE)网络详解 目录 深度学习之图像分类(二十八)Sparse-MLP(MoE)网络详解 1. 前言 2. Mixture of Experts 2 ...
- Flink/Blink 原理漫谈(二)流表对偶性和distinct详解
系列文章目录 Flink/Blink 原理漫谈(零)运行时的组件 Flink/Blink 原理漫谈(一)时间,watermark详解 Flink/Blink 原理漫谈(二)流表对偶性和distinct ...
- AutoCAD .Net二次开发之JIG动态绘制详解
AutoCAD .Net二次开发之JIG动态绘制详解 AutoCAD平台动态绘制分两种,单实体绘制EntityJig和多实体绘制DrawJig,需要自己自定义类去继承.(本人的理解全放在了代码注释中, ...
最新文章
- linux 命令删除命令,Linux 命令之删除命令
- 3句话点评2020年看过的那些精彩的电影
- 2017年9月9日普级组 优美三角剖分
- python怎样入门_python怎么入门啊?
- Spring Boot零散知识总结
- java数组的api_java程序员常用的11个API,赶紧收藏
- 线性模型(1) —— 多元线性回归
- 研究生必备自学课程!打好科研的数学基础与机器学习基础!
- 关于matlab表情包,matlab表情包 - matlab微信表情包 - matlabQQ表情包 - 发表情 fabiaoqing.com...
- 【技巧】谷歌Chrome浏览器清理缓存的两种方式
- js 实现简单区块链
- 调用百度汇率api 获取各国的汇率值
- 关于点焊,你知道多少
- UML类图---类与类图的解析
- 电子信箱怎么样注册?邮箱格式怎么写?
- 那些年,我们一起写过的“单例模式”
- c语言1024是哪个字母,自己没事写的1024的C语言代码
- 如何解除WORD限制编辑
- Visual Studio Code (VSCode)使用之普通Web项目启动
- 好看的个人主页,导航页HTML源码源码三分钟下载安装