本篇文章给大家带来的内容是关于vue封装ajax的代码示例详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
HTML文件：
Document {{ msg }}var vm=new Vue({ el: "#app", data: { msg: "", }, methods: { getInfo: function (){ var self=this; this.ajax.get("1.json",{ tel: 123456, address: "杭州" },function (data){ self.msg=data[1].name },"json"); } } })
登录后复制
JS文件：
/** ajax封装:* 1. 引入文件* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)* url: 需要获取数据的文件地址 (string)* data: 需要发送的信息 (可省略) (obj)* fn: 获取信息后的回调函数,接收到的返回值为data (function)* ojson: 是否需要转换为json格式 (可省略) (设置为 "json")** 3. new Vue().ajax.get().cancel(): 取消异步请求* 4. new Vue().ajax.json(str): 可转化json格式字符串**/Vue.prototype.ajax={ //添加url传送信息 addUrl: function (url,obj){ //如果省略url，则为post请求，令obj为url，令url为null if(arguments.length==1){ obj=url; url=null; } //url不为空(get请求: 设置url信息) if(!!url){ for(var k in obj){ url += (url.indexOf("?")==-1 ? "?" : "&"); url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]); } }else{ //post请求(设置data信息) url=""; for(var k in obj){ url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]); url+="&"; } //删除最后一个& var arr=url.split(""); arr.pop(); url=arr.join(""); } //返回拼接好的信息 return url; }, get: function (url,data,fn,ojson){ this.xhr=new XMLHttpRequest(); //省略data时,即不发送数据 if(typeof data =="function"){ ojson=fn; fn=data; data={}; } //合并url和data信息 url=this.addUrl(url,data) //是否异步发送 this.xhr.open("get",url,true); this.xhr.send(null); //当请求完成之后调用回调函数返回数据 this.success(fn,ojson); //链式编程 return this; }, post: function (url,data,fn,ojson){ this.xhr=new XMLHttpRequest(); //省略data时,即不发送数据 if(typeof data =="function"){ ojson=fn; fn=data; data={}; } //合并data信息 data=this.addUrl(data); //是否异步发送 this.xhr.open("post",url,true); this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); this.xhr.send(data); //当请求完成之后调用回调函数返回数据 this.success(fn,ojson); //链式编程 return this; }, //字符串转换json json: function (str){ return (new Function("return " + str))(); }, success: function (fn,ojson){ //当请求完成之后调用回调函数返回数据 var self=this; this.xhr.onreadystatechange=function (){ var odata; if(self.xhr.readyState == 4){ if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){ odata=self.xhr.responseText; //若为json则转化json格式 if(ojson==="json"){ odata=self.json(odata); } fn(odata); }else{ odata="request was unsuccessful: "+self.xhr.status; fn(odata); } } } }, //取消异步请求 cancel: function (){ this.xhr.abort(); return this; }}
登录后复制
后台获取或者前端构造的数据结构：
[ { "name": "张三", "age": 18, "sex": "man" }, { "name": "李四", "age": 20, "sex": "woman" }, { "name": "王五", "age": 22, "sex": "man" }]
登录后复制
以上就是Vue封装ajax的代码示例详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2735577.html
