这次给大家带来二次封装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) })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Ajax方法实现Form表单提交的方法
jQuery怎么验证Ajax提交表单传参
以上就是二次封装jquery ajax如何实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777105.html
