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

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

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

進入正題

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

在開始之前，我們一樣需要安裝 axios：

$ npm install axios --save

如果讀者還沒有進入到 vue-cli 的階段，可以使用 CDN 的方式引入 axios 唷！

然後我們需要在專案中的 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 鉤子中呼叫它，以下是程式碼的補充說明：

.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