vue实战宝典：使用axios发送ajax请求（超实用）
vue本身不支持ajax请求，采用了“第三方插件”的形式。
现在支持的官方插件有 vue-reous 、axios 和 fetch
fetch我在另一篇文章（文末有地址）中已详细介绍使用。本文说下axios的使用！
axios
—— 基于HTTPServletRequest的一款用于vue中的http插件 。其格式上基于es6的Promise。
引用方式（两种）：
npm install axios (-S)
基本用法：
- 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)
})
}
}
反正就是不能直接发送对象格式！
实例应用1：获取GitHub账户信息
GitHub ID: <input type="text" v-model="uid">
<button @click="getUserById(uid)">获取指定GitHub账户信息并显示</button>
<br />
姓名：{{user.name}} <br />
头像：<img :src="user.avatar_url" alt="GitHub头像">
js中：
data:{
user:{
}
}
methods:{
getUserById(uid){
axios.get(`https://api.github.com/users/${uid}`)
.then(res=>{
this.user=res.data;
})
}
}
这在某些场景下就引申出了 —— 跨域问题 ：
axios本身并不支持跨域请求，只能用第三方库。
我们可以：
实例应用2：使用vue-resource发送jsonp（跨域）请求
安装（两种方式）：
npm install vue-resource
使用：
<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
如下图，是我在小程序中请求爱奇艺的数据时发送的请求：
实战：百度搜索关键字列表（vue版）
<style>
.current{
background-color:#ccc;
}
</style>
<body>
<div id="app">
<input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
<ul>
<li v-for="(value,index) in myData" :class="{current:index==now}">
{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
keyword:'',
myData:[],
now:-1 //当前选中项的索引
},
methods:{
getData(e){
//如果按方向键上、下，则不发请求
if(e.keyCode==38 || e.keyCode==48)
return;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
//wd是搜索引擎中指关键字的，这两个字母是固定的，它接收的值可以是v-model传来的
//wd实际上是word的缩写，本意“传参”
wd:this.keyword
},
//cb是百度使用的jsonp的参数名，他其实是指了“回调传递”的“函数”（这一点在文末文章中有提到）
jsonp:'cb'
}).then(res=>{
this.myData=res.data.s;
});
},
changeDown(){
this.now++;
this.keyword=this.myData[this.now];
if(this.now===this.myData.length){
this.now=-1;
}
},
changeUp(){
this.now--;
this.keyword=this.myData[this.now];
if(this.now===-2){
this.now=this.myData.length-1;
}
}
}
});
</script>
</body>
笔者相关文章推荐：
- 原生JS仿百度搜索关键字列表：https://blog.csdn.net/qq_43624878/article/details/97429167
- 高频请求新方案——fetch！：https://blog.csdn.net/qq_43624878/article/details/102531577