Vue中Axios從遠程/后臺讀取數(shù)據(jù)的方法

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

Axios從遠程讀取數(shù)據(jù)

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

安裝Axios

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

cnpm install axios –save

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

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

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

服務(wù)端拉取數(shù)據(jù)

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

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

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('網(wǎng)絡(luò)錯誤，不能訪問');
   })
 },

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

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

• 網(wǎng)絡(luò)不通：網(wǎng)絡(luò)狀況不是很好，這可以在失敗后隔5秒再次請求。

• 報決絕訪問：這種多是后端程序員設(shè)置了不允許跨域訪問，需要你和后端程序員一起調(diào)試解決。

拉取分類商品數(shù)據(jù)：

依然用Get進行拉取，拉取后先用consoe.log(response)查看一下數(shù)據(jù)結(jié)構(gòu)，讓后進行賦值。

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

 //讀取分類商品列表
   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('網(wǎng)絡(luò)錯誤，不能訪問');
   })

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從遠程/后臺讀取數(shù)據(jù)的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！