接上篇《11.Vue中元件的生命周期函數》
上一篇我們主要講解了vue的元件的生命周期函數，本篇我們來聊一聊如何使用vue-resource實作網絡請求。
本系列博文使用的Vue版本：2.6.11
一、請求網絡資料
做過前後端分離開發的同學都知道，前端從後端異步擷取資料，都是通過ajax的方式，向後端服務位址發送get或post的請求，拿到回複後做後續的操作。那麼在vue中，我們向後端請求參數，同樣使用ajax的方式，我們可以使用一些元件，來實作ajax的網絡請求。
在vue中，常用的網絡元件有三種，一種是vue-resource庫，一種是axios，另外一種是fetch-jsonp，本篇我們着重來講一下vue-resource庫。
二、vue-resource簡介和安裝
vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。vue-resource插件除了能實作和之前常用的$.ajax的相同的功能，還提供了更為簡潔的API。
我們可以通路vue-resource的github首頁（https://github.com/pagekit/vue-resource），可以看到該插件的開源代碼，以及其安裝和使用方法：
上面可以看到提供的安裝指令，和一個具體使用的樣例。
我們打開編譯器，在之前項目的控制台（預設定位在我們的工程目錄中），輸入“npm install vue-resource”指令來安裝vue-resource：
這裡我們添加了一個“--save”的參數，該參數會将引入vue-resource依賴的語句寫入到項目的打封包件package.json中，這樣下一次打包時會強制引入vue-resource，防止依賴不全導緻一些問題。
安裝完成之後，我們可以看到“--save”參數也起了作用，vue-resource的依賴被寫入package.json的“dependencies”部分了：
安裝完成後，我們要在項目中引用該插件，此時我們到項目的主元件中，引入vue-resource作為我們的新插件：
這裡使用import語句（import VueResource from 'vue-resource';），來引入vue-resource插件，命名為“VueResource”。然後下面使用“Vue.use(VueResource);”就啟用了我們的vue-resource插件了。
然後我們就可以使用vue-resource進行網絡請求了。
三、vue-resource的使用
我們來使用vue-resource進行網絡請求。檢視github上的說明，官方給了一個get請求的樣例：
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
可以看到，和ajax類似，在get方法中放入要請求的API的url位址，在回調函數“then”中，就可以擷取回報對象response的資料，如果調用異常，則跳入第二個方法。我們來試驗一下。
注：上面的“response =>{}”是ES6的寫法，相當于“function(response){}”。
備份之前的App.vue頁面，重新編寫一個新的App.vue頁面，在頁面上放置一個按鈕，實作點選按鈕後請求一個API接口，擷取傳回的資訊，顯示在頁面上：
<template>
<!-- vue的模闆裡面，所有的内容都需要被一個根節點包裹起來 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">請求資料</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好，vue'
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=%E5%8C%97%E4%BA%AC";
this.$http.get(api_url).then(response =>{
console.log(response);
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
這裡我們請求的是北京的天氣情況，使用的是一個開放的免費資料接口。我們在擷取到資料之後，将擷取到的json資訊列印在浏覽器的控制台上，測試結果：
然後我們修改一下代碼，擷取結果中的data資料，把北京七天的天氣在頁面上周遊出來：
<template>
<!-- vue的模闆裡面，所有的内容都需要被一個根節點包裹起來 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">請求資料</button>
<br/><hr/>
<ul>
<li v-for="item in list">
{{item.date}}- {{item.week}}- {{item.wea}}- {{item.tem}}°C
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好，vue',
list:[]
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=%E5%8C%97%E4%BA%AC";
this.$http.get(api_url).then(response =>{
console.log(response);
this.list=response.body.data;
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
效果：
實際上擷取到body後，後面的寫法是和處理普通ajax結果一樣的，解析json，擷取json對象的參數即可。
四、vue-resource的參數詳解
剛剛我們成功使用了vue-resource進行了網絡參數請求，這裡我們來詳細說明一下vue-resource的方法調用格式。
vue-resource支援所有的http請求格式（get、post、put、detete、head、patch），以及解決同源政策的跨域請求jsonp，請求格式如下：
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.put('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.delete('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.head('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.patch('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.jsonp('/someUrl', [options]).then(successCallback, errorCallback);
注：基于全局Vue對象使用“Vue.http.”，在一個Vue執行個體内使用“this.$http”。
詳細的請求參數清單解釋：
response對象的參數和提供的方法：
我們把剛剛的get請求天氣的代碼，将url的參數寫在參數欄：
<template>
<!-- vue的模闆裡面，所有的内容都需要被一個根節點包裹起來 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">請求資料</button>
<br/><hr/>
<ul>
<li v-for="item in list">
{{item.date}}- {{item.week}}- {{item.wea}}- {{item.tem}}°C
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好，vue',
list:[]
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api";
this.$http.get(api_url,{
params: {
version: 'v9',
appid:'23035354',
appsecret:'8YvlPNrz',
city:'北京'
}
}).then(response =>{
console.log(response);
this.list=response.body.data;
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
測試後請求沒有問題。
五、總結
使用vue-resource進行網絡請求的步驟：
（1）安裝vue-resource子產品
npm install vue-resource --save
（2）main.js引入vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
（3）在元件中直接使用vue-resource
如使用get和post請求網絡資料：
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
下一篇我們介紹另外兩個網絡請求元件，Axios和fetchJsonp。
參考：
《IT營：itying.com-2018年Vue2.x 5小時入門視訊教程》
轉載請注明出處：https://blog.csdn.net/acmman/article/details/108953681