axios 網(wǎng)絡(luò)請求庫
- axios必須先導(dǎo)入后使用
- 使用get或post方法即可發(fā)送對應(yīng)的請求
- then方法中的回調(diào)函數(shù)會在請求成功或失敗時觸發(fā)
- 通過回調(diào)函數(shù)的形參可以獲取相應(yīng)內(nèi)容，或錯誤信息
<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 中文網(wǎng) (axios-http.cn)
axios+vue
- axios回調(diào)函數(shù)中的this已經(jīng)改變,無法訪問到data中的數(shù)據(jù)
-
把this保存起來.回調(diào)函數(shù)值中直接使用保存的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)
- 查詢數(shù)據(jù)(axios 接口 v-model)
-
渲染數(shù)據(jù)(v-for 數(shù)組 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>
這里出現(xiàn)過一個bug,就是在輸入框中輸入城市名字后,并沒有反應(yīng)
經(jīng)過排查,發(fā)現(xiàn)沒有寫v-model綁定數(shù)據(jù)
原先在輸入框后面有個button,點擊即可查詢天氣
但是目前還不太會寫 留個坑
