vue本身不支持ajax请求，采用了“第三方插件”的形式。 现在支持的官方插件有 vue-reous 、axios 和 fetch
fetch我在另一篇文章（文末有地址）中已详细介绍使用。本文说下axios的使用！
—— 基于HTTPServletRequest的一款用于vue中的http插件 。其格式上基于es6的Promise。
引用方式（两种）：
npm install axios (-S)<script src="https://unpkg.com/axios/dist/axios.min.js"></script>基本用法：
axios(options);axios.get(url,options);axios.post(url,data,options); 比如： （user.json） { "id":1001, "name":"秋香"， "age":18 } <body> <div id="itany"> <button @click="send">发送ajax请求</button> </div> <script> window.onload=function(){ new Vue({ el:'#itany', methods:{ send(){ axios({ method:'get', url:'user.json' }).then(function(resp){ console.log(resp.data); }).then(function(resp){ console.log("请求失败"); }); } } }); } </script> </body>那么，第二种方式怎么写呢？—— get方式，通过url传参 （上面那个send函数修改，如下：）
axios.get('server.php?name=mxc&age=18') .then(resp=>{ console.log(resp.data); }).catch(err=>{ console.log("请求失败"); })（server.php文件）
<?php $name=$_GET['name']; $age=$_GET['age']; echo '姓名：',$name,'年龄：',$age; ?>而对于post请求，貌似官方对其不重视，导致了post请求看起来“天生有缺陷”，这里不详谈。 我们需要用如：
axios.post('server2.php','name=mxc&age=19') .then(...);或者：reansformRequest选项（在请求发送前，对请求数据进行转换（对象->字符串））
//data中： data:{ user:{ name:'alice', age:19 } }, //methods中的send()函数中： axios.post('server2.php',this.user,{ transformRequest:[ function(data){ let params=''; for(let index in data){ params+=index+='='+data[index]+'&'; } return params; } ] }) .then(resp=>{ console.log(resp.data); }).catch(err=>{ console.log("请求失败"); })这样的方式。。。
当然，你还可以选择URLSearchParams对象方法：
methods：{ postInfo（）{ let url = "url" let params=new URLSearchParams(); //在axios的官网中有介绍——也是一个化对象为字符串的方法 params.append("key",index) params.append("key",index) axios.post(url,params).then((res)=>{ console.log(res) }) } }反正就是不能直接发送对象格式！
js中：
data:{ user:{ } } methods:{ getUserById(uid){ axios.get(`https://api.github.com/users/${uid}`) .then(res=>{ this.user=res.data; }) } }这在某些场景下就引申出了 —— 跨域问题 ： axios本身并不支持跨域请求，只能用第三方库。
我们可以：
安装（两种方式）：
npm install vue-resource<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>使用：
<button @click="sendJSONP">向360搜索发送请求</button> sendJSONP(){ this.$http.jsonp('https://sug.so.360.cn/suggest',{ params:{ word:'a' } }).then(res=>{ //为啥要加.s？你去控制台输出会发现，数据是保存在res的data“数组”中的s数组中 console.log(res.data.s); }) }
相比之下，不得不说，微信小程序的跨域问题要简单的多——小程序不涉及跨域问题！
因为微信小程序的做法是由他们的后台取访问我们的后台，所以实际的“跨域问题”已经在我们的小程序与微信后台交流的时候解决了。所以开发者不需要考虑这个问题。 实际上后端服务器做了后端映射、你请求的接口实际到微信的后端做了一道映射 微信后端拿到你的wx.request调用的url、用后端请求后端 拿到数据后将body返给你 这就是为什么、请求后端之后、拿回来的只有body没有header、取不到response header
如下图，是我在小程序中请求爱奇艺的数据时发送的请求：
笔者相关文章推荐：
原生JS仿百度搜索关键字列表：https://blog.csdn.net/qq_43624878/article/details/97429167高频请求新方案——fetch！：https://blog.csdn.net/qq_43624878/article/details/102531577 行舟客 认证博客专家 ECMAScript 6 Node.js CSS 江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源；曾参与过中大型微信小程序项目前端开发，并主导过一些官网（原生）开发；着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有：微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ，欢迎star！