iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

超緊繃!30天Vue.js學習日記系列 第 27

[Vue.js][日記]擁抱全家桶系列-你問我資料哪裡來?(1)

https://ithelp.ithome.com.tw/upload/images/20190912/20110850dsypfXRkNe.jpg

超緊繃!30天Vue.js學習日記 擁抱全家桶系列-你問我資料哪裡來?(1)

大家好,我是IAN不是PETER,在學習如何使用Vue開發SPA時,我突然想到一個問題:我要怎麼用PHP把資料帶到寫好的前端呢。。。
一想到那個把多種語言混在一起煮大雜燴的渾沌大魔王,突然發現自己的眼角怎麼濕濕的?!

不過在跟其他前輩交流後,才知道,如果想把後端資料帶到我們寫好的SPA中,可以透過架接API的方式達成,我們今天先不探討如何架設API(如果探討下去應該會變成地獄之路,60天的爆肝經歷?)我們在今天會先了解要怎麼去串API,至於這個API從哪來,就丟給明天的我去解決吧,嘻嘻!

回到正題,我們今天要介紹的就是Vue官方所推薦的ajax套件-axios,至於為什麼不是vue-resource呢?因為連開發者都親自推薦我們使用axios,估計是想要把開發團隊的火力集中在vue本身,這樣子就不用花更多時間開發這種已經有替代方案的東西了,原因絕對不是因為我沒有學什麼的啦!

在開始之前,我們一樣需要安裝axios,如果讀者還沒有進入到vue-cli,可以使用CDN的方式引入,若你已經開始使用vue-cli,我們一樣在命令列輸入:

$ npm install axios --save

然後我們需要在專案中的main.js使用axios:

import axios from 'axios' 
import VueAxios from 'vue-axios' 
Vue.use(VueAxios, axios)

再來則是一些基本的請求方法:

  • GET(取得資料)

  • POST(新增資料)

  • PUT(更新指定id的全部資料)

  • PATCH(更新指定id的部分資料)

  • DELETE(刪除資料)

這邊附上一小段我自己在練習時用到的程式碼:

getproduct() { 
this.axios 
.get("http://localhost:3000/posts") 
.then(response => { this.product = response.data; console.log(response.data); }) 
.catch(error => { this.errored = true; console.log(error); }) 
.finally(() => (this.loading = false)); 
}

這段程式碼我是寫在methods中,並且在created鉤子中呼叫它,
然後我在這邊簡單的介紹一下這些code的意思:

.get("http://localhost:3000/posts") 

這邊是指我們以get的方式對這支api做請求

.then(response => { this.product = response.data; console.log(response.data); }) 

.then則是請求成功後,我們用data中的product去存放我們得到的response中的data,至於為什麼是response.data呢?在明天過後你就會知道了XD

.catch則是存放一些請求失敗的操作,像我在這邊就使用console.log()去印些東西來看,方便除錯!

.finally代表不管結果怎麼樣,我都會做的事,我在這邊把data中的loading改為false,以方便對我們的網頁進行渲染(可能是把loading圈圈關掉…balabala)

我在這邊就提供get的範例,因為如果有其他的請求就把.get改成你要的方式就可以了:D

今天的教學告一段落,我們明天會針對怎麼生出api做測試進行解說,掰掰~

  • 補充

如果需要更詳細的axios教程,可以參見:

https://www.kancloud.cn/yunye/axios/234845


上一篇
[Vue.js][日記]擁抱全家桶系列-Vue-cli (3)
下一篇
[Vue.js][日記]擁抱全家桶系列-你問我資料哪裡來?(2)
系列文
超緊繃!30天Vue.js學習日記33

尚未有邦友留言

立即登入留言