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

這篇文章主要為大家展示了“Vue中Axios從遠程/后臺讀取數據的方法”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue中Axios從遠程/后臺讀取數據的方法”這篇文章吧。

Axios從遠程讀取數據

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

安裝Axios

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

cnpm install axios –save

由于axios是需要打包到生產環境中的，所以我們使用–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>

以上是“Vue中Axios從遠程/后臺讀取數據的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！