Vue中Axios從遠程/后臺讀取數據

更新時間：2019年01月21日 11:05:59 作者：muzidigbig

今天小編就為大家分享一篇關于Vue中Axios從遠程/后臺讀取數據，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

Axios從遠程讀取數據

學習Axios的知識，并把數據從遠端讀取到頁面上。后端數據，只要調用相應的頁面就可以調取，在實際開發(fā)中，這些后臺數據是需要后端程序員和你共同討論制作的。我們現在只做前端，數據大家只要會調用即可。

安裝Axios

我們直接使用npm install來進行安裝。

cnpm install axios –save

由于axios是需要打包到生產環(huán)境中的，所以我們使用–save來進行安裝。

引入Axios（在哪個模塊中使用就在哪個模塊中引入）

我們在.vue頁面引入Axios，由于使用了npm來進行安裝，所以這里不需要填寫路徑。

服務端拉取數據

（在實際項目中這個后臺接口地址是后端程序員提供給你的）

可以先把后臺給的地址放到地址欄訪問一下，是可以正常訪問的，并且輸出了json格式的字符串，這就是我們需要的遠端數據了。這里我們使用Axios的get 方式來獲得數據。

created(){
   axios.get('http://jspang.com/DemoApi/oftenGoods.php')
       //then獲取成功；response成功后的返回值（對象）
   .then(response=>{
     console.log(response);
     this.oftenGoods=response.data;
   })
       //獲取失敗
   .catch(error=>{
     console.log(error);
     alert('網絡錯誤，不能訪問');
   })
 },

把axios的方法寫到了created鉤子函數中，我們使用了get 方法進行拉取數據，如果拉取成功用遠端數據對oftenGoods進行賦值。

拉取報錯，一般有兩種情況：

網絡不通：網絡狀況不是很好，這可以在失敗后隔5秒再次請求。
報決絕訪問：這種多是后端程序員設置了不允許跨域訪問，需要你和后端程序員一起調試解決。

拉取分類商品數據：

依然用Get進行拉取，拉取后先用consoe.log(response)查看一下數據結構，讓后進行賦值。

在這里貼出拉取和分配不同分類代碼：

 //讀取分類商品列表
   axios.get('http://jspang.com/DemoApi/typeGoods.php')
   .then(response=>{
     console.log(response);
     //this.oftenGoods=response.data;
     this.type0Goods=response.data[0];
     this.type1Goods=response.data[1];
     this.type2Goods=response.data[2];
     this.type3Goods=response.data[3];
   })
   .catch(error=>{
     console.log(error);
     alert('網絡錯誤，不能訪問');
   })

html模板輸出代碼：

<ul class='cookList'>
   <li v-for="goods in type3Goods">
     <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
     <span class="foodName">{{goods.goodsName}}</span>
     <span class="foodPrice">￥{{goods.price}}元</span>
   </li>
</ul>

若有不足請多多指教！希望給您帶來幫助！

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內容請查看下面相關鏈接