axios基本使用
- axios必须先导入才可以使用
- 使用get或者post方法即可发送请求,
- then方法的回调函数会在请求成功或者失败时触发
- 通过回调函数形参可以获取响应内容或者错误信息
- axios文档
<div id="app">
<input type="button" value="get请求" class='get'>
<input type="button" value="post请求" class='post'>
</div>
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
}),function(err){
console.log(err);
}
},
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{
username:"ssc"
})
.then(function(response){
console.log(response);
}),function(err){
console.log(err);
}
}
</script>
axios+Vue
- axios回调函数中的this已经改变,无法直接访问到data中的数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地最大区别就是改变了数据来源
<div id="app">
<input type="button" value="获取笑话" @click='getJoke'>
<p>{{joke}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
joke:'很好笑的笑话',
},
methods:{
getJoke:function(){
var that =this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
console.log(response.data);
that.joke = response.data;
},function(err){
console.log(err);
})
}
},
})
</script>
- 效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e0ad6bce19a46a1be4ba34604a901de0.png)
天知道小程序
var app = new Vue({
el:'#app',
data:{
city:'',
weatherList:[],
cityList:['北京','贵阳','襄阳','武汉']
},
methods:{
buttonSearch:function(p){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.cityList[p])
.then(function(response){
that.weatherList = response.data.data.forecast;
console.log(that.weatherList);
})
.catch(function(err){
})
},
searchWeather:function(p){
console.log(this.city);
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
that.weatherList = response.data.data.forecast;
console.log(that.weatherList);
})
.catch(function(err){
})
},
}
})
<div id="app">
<input type="text" v-model='city' @keyup.enter='searchWeather' placeholder="请输入你想知道天气的城市">
<input type="button" value="搜索" @click='searchWeather'>
<ul style="display: flex;">
<span v-for='(item,index) in cityList' @click='buttonSearch(index)' style="margin: 20px;">
{{item}}
</span>
</ul>
<ul style="display: flex;">
<li v-for="item in weatherList" style="width: 100%;">
{{item.date}}
<br>
{{item.high}}---{{item.low}}
<br>
{{item.type}}
</li>
</ul>
</div>
<script src="./main.js"></script>
- 效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8890863731a92636f10e0908152d0d38.png)