axios 网络请求库
- axios必须先导入后使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取相应内容，或错误信息
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<input type="button" value="get" class="get">
<input type="button" value="post" class="post">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
interface 1 : random joke
address:
method:get
para:num
response:joke
*/
document.querySelector('.get').onclick = function () {
axios.get('https://autumnfish.cn/api/joke/list?num=6')
.then(function (response) {
console.log(response)
},function (err){
console.log(err)
} )
}
/*
interface 2 : user register
address:
method:post
para:username
resopnse:success or fail
*/
document.querySelector('.post').onclick = function () {
axios.post('https://autumnfish.cn/api/user/reg',{
username:'jack'
}).then(function (response) {
console.log(response)
},function (err) {
console.log(err)
})
}
</script>
</body>
</html>
axios中文文档：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
axios+vue
- axios回调函数中的this已经改变,无法访问到data中的数据
-
把this保存起来.回调函数值中直接使用保存的this即可
image.png
<div id="app">
<input type="button" value="get joke" @click="getJoke">
<p>{{ joke }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
joke:'funny 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>
实例 - 天气查询
回车查询
- 按下回车(v-on .enter)
- 查询数据(axios 接口 v-model)
-
渲染数据(v-for 数组 that)
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo">天气查询</div>
<div class="form_group">
<input type="text" class="input_txt" placeholder="请输入查询的城市天气" v-model="city" @keyup.enter="searchWeather">
</div>
</div>
<div class="hotkey">
<input type="button" value="北京" @click="changeCity('北京')">
<input type="button" value="上海" @click="changeCity('上海')">
<input type="button" value="广州" @click="changeCity('广州')">
<input type="button" value="深圳" @click="changeCity('深圳')">
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
<div class="info_temp">
<b>{{ item.low }}</b>
~
<b>{{ item.high }}</b>
</div>
<div class="info_date"><span>{{ item.date }}</span></div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
city: '',
weatherList: []
},
methods: {
searchWeather: function () {
var that = this
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(
function (response) {
//console.log(res.data.data.forecast)
that.weatherList = response.data.data.forecast
}
)//then
},//f
changeCity:function (city) {
this.city = city
this.searchWeather()
}
}//methods
})
</script>
</body>
</html>
这里出现过一个bug,就是在输入框中输入城市名字后,并没有反应
经过排查,发现没有写v-model绑定数据
原先在输入框后面有个button,点击即可查询天气
但是目前还不太会写 留个坑
