Vue.js + axios 介紹與實作(上)

實作 JSON-server included, GET, POST

📢 Vue + axios系列文章分為上、下 (共 2 篇)

📋 目錄

1. 介紹與安裝 axios
2. 實作練習說明
3. [實作]用 JSON-server 模擬 API server
4. [實作]建立 API 呼叫與處理資料
5. [實作]拆分出 axios 設定檔
6. [實作]新增 post 資料

介紹與安裝 axios

當完成專案的開發，使用 npm run build 產生 dist 資料夾。當瀏覽器發出請求(request)，會從 index.html 檔案進入把整個應用服務啟動起來，後續都是在本地端(local)的請求。呼叫 API，模式與前者有些相似，同樣對 server 發出請求，取得回傳資料，再做後續對應處理。

Vue.js 本身沒有內建方法呼叫 API ，推薦使用 axios 來完成 ajax 請求。axios 是一個基於 Promise 的 HTTP 庫，可以在瀏覽器和 node.js 中使用。
🔎 Github 開源網址：https : //github.com/axios/axios

使用 NPM 安裝

npm install axios

實作練習說明

本次實作練習以 axios 的使用為主，所以會基於一個完整的小專案 vuetify-practice-example ，於此下載下來後做修改。完成套件安裝後， npm run serve ，開啟瀏覽器會看到以下畫面：

使用者可以輸入新員工的資訊，由於此建構好的專案是設計給 Vuetify 系列課程，著重在樣式設計與調整。因而功能較陽春，增刪查改僅提供新增與查看。在此篇文章，將透過修改這兩個功能，藉由實作更熟悉 axios 應用。

🚀 準備好就開始吧！

用 JSON-server 模擬 API server

在進到 JSON server 之前，API 可以由不同框架來建構，舉凡：使用 Framework(Express-JS, Laravel-PHP, Django- Python)或是使用 Service(Firebase)等。
此練習將自行建構一個 JSON server 來模擬 API 呼叫。

step1 安裝 json-server

詳細說明可以參考🔎官網

npm install -g json-server

step2 撰寫 db.json 檔案

在專案下的路徑，新增 db.json 檔案。檔案的內容即為 DataTable.vue 檔案中 employees 的內容。
(提醒)記得 JSON 檔案中 key 的名稱，需要用雙引號框起來！

此非完整db.json檔案

step3 啟動 JSON server

終端機切換至專案的資料家中，輸入下方的指令：

json-server --watch db.json

此時瀏覽器開啟 3000 port 之下的 employees，可以看到剛剛的內容。

step4 DataTable.vue 新增生命週期鉤子

於 DataTable.vue 引用 axios

import axios from 'axios'

並新增下方程式碼：

非完整 DataTable.vue 內容

開啟開發人員工具(F12)，可以看到順利用 axios 呼叫 json-server API

建立 API 呼叫與處理資料

完成 json-server 建立，接著開始修改 DataTable.vue 內容。由於目前員工名單寫死在 data 中，先將員工資料註解掉，留下一個空的 array。(此時瀏覽器畫面會是空的)

接著，將 API 回傳的資料設定給 employees。(資料長回來了！)

非完整 DataTable.vue 內容

axios 本身是非同步執行，代表後面的執行不需要等前面的全部執行完。若需要在其中刻意製作出同步處理，可以藉由 ES7 async & await 做到。
可以參考這篇文章：Callbacks, Promises, Async Await

修改完成的程式碼如下：

非完整 DataTable.vue 內容

有無需要 async & await 可以看專案的需求，後面說明會採用前面的寫法。

拆分出 axios 設定檔

到前一個段落，基本的 axios 使用已經完成。然而若是比較大型的專案，建議將 axios 抽出來集中在一個設定檔案。

拆出 axios 設定檔的好處如下：

• 集中設定 Request Config
• 支援攔截器，可在 then/catch 前做額外處理
• 封裝 API 易於管理

step1 新增設定檔

在 src 資料夾之下，新增 DataService.js 檔案，用這個檔案來設定 axios。

getData 是剛剛要讀取員工資料的 api
有關 axios 詳細配置，可以參考官網說明

step2 修改 DataTable.vue

把 import axios from 'axios' 刪除，再把 DataService.js 引用進來

import DataService from '@/service/DataService.js'

下方原本寫 axios 的地方改寫 DataService 對應的方法。

目前讀取資料的各種改法都成功了！
接下來將探討如何藉由 axios post 資料。

新增 post 資料

前面使用最簡易的 get 方法，現在要使用 post 📬

step1 DataService.js 調整

DataService.js 檔案中新增：

addData(employeeData) {
    return apiClient.post('/employees',employeeData)
}

employeeData 會是按下提交按鈕後，發送的參數。
InputForm.vue 檔案，也把 DataService.js 引用進來：

import DataService from '@/service/DataService.js'

step2 新增 Vuex 檔案

由於 post 資料需要用到 id，這邊採用 Vuex 的協助。
若不清楚 Vuex，可以參考這系列文章：

🚪 學習 Vuex 狀態管理模式(上)
🚪 學習 Vuex 狀態管理模式(中)
🚪 學習 Vuex 狀態管理模式(下)

安裝好 Vuex 後，於 src 資料夾下，新增 store 資料夾並加入 index.js 檔案

step3 修改InputForm.vue 檔案

method 內容修改如下：

此非完InputForm.vue檔案

其中 id ，原本的寫法是使用 $emit & props 以及 watch 去做檔案間資料傳送，現在採用 Vuex 可直接用 this.$store.state.xxx 取得。

step4 修改 DataTable.vue 檔案

使用 Vuex，employees 變數交由 state 做管理。將<v-datatable>標籤內的 employees修改成 this.$store.state.employees ，而 data 中的 employees 還有整個 watch 都不需要了。 created 中的 this.employees 改成 this.$store.state.employees。

step5 修改 App.vue 檔案

使用 Vuex，updataEmp & refreshDataTable 都不需要了。

完成以上的步驟，操作一次看看 💻

db.json 檔案中的資料新增成功 🎉
此篇文章詳細說明 get & post 方法， 有關 delete & put 可以參考下一篇。

🚪 前往下一章節：Vue.js + axios 介紹與實作(下)

If you “GET” the point, give me some claps. 👏👏👏
If you don’t, I will try “POST”. 📬