React.js + axios 介紹與實作(上)
📢 React+ axios系列文章分為上、下 (共 2 篇)
📋 目錄
介紹與安裝 axios
當瀏覽器發出請求(request)，會從 index.html 檔案進入把整個應用服務啟動起來，後續都是在本地端(local)的請求。呼叫 API，模式與前者有些相似，同樣對 server 發出請求，取得回傳資料，再做後續對應處理。
React.js 本身沒有內建方法呼叫 API ，推薦使用 axios 來完成 ajax 請求。axios 是一個基於 Promise 的 HTTP 庫，可以在瀏覽器和 node.js 中使用。
🔎 Github 開源網址：https : //github.com/axios/axios
使用 NPM 安裝
npm install axios實作練習說明
本次實作練習以 axios 的使用為主，所以會基於一個完整的小專案 react-practice-employees ，於此下載下來後做修改。完成套件安裝後， 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-serverstep2 撰寫 db.json 檔案
在專案下的路徑，新增 db.json 檔案。檔案的內容即為 DataTable.vue 檔案中 employees 的內容。
(提醒)記得 JSON 檔案中 key 的名稱，需要用雙引號框起來！
step3 啟動 JSON server
終端機切換至專案的資料家中，輸入下方的指令：
json-server --watch db.json此時瀏覽器開啟 3000 port 之下的 employees，可以看到剛剛的內容。
[實作]建立 API 呼叫與處理資料
useEffect
於 App.js 引用 axios
import axios from 'axios'並新增下方程式碼：
把原本寫固定的 employeeData資料移除。
原本的 const [employees, setEmployees] = useState(employeeData) 改成 const [employees, setEmployees] = useState(null)
axios 本身是非同步執行，代表後面的執行不需要等前面的全部執行完。若需要在其中刻意製作出同步處理，可以藉由 ES7 async & await 做到。(Async-await允許開發者不使用then和catch回調函數的情況下寫出更簡潔的代碼。)
可以參考這篇文章：Callbacks, Promises, Async Await
修改完成的程式碼如下：
有無需要 async & await 可實際看專案的需求。
[實作]新增 post 資料
前面使用最簡易的 get 方法，現在要使用 post 📬
為了用Axios進行POST請求，使用.post()方法。第二個參數以物件格式傳入欲新增的資料內容。
修改程式碼如下：
操作一次看看 💻
db.json 檔案中的資料新增成功 🎉
此篇文章詳細說明 get & post 方法， 有關 delete & put 可以參考下一篇。
🚪 前往下一章節：React.js + axios 介紹與實作(下)
