🏅Day16 - Axios 基本介紹使用

Axios

在開始實作註冊功能之前，需要先了解 Axios 這個第三方套件：

Axios 是基於 Promise 的 HTTP 請求庫的設計，使得開發者可以輕鬆地與後端 API 進行串接，

比起 AJAX 更輕量化，且寫起來更加的直接、閱讀性更好。

它提供了簡單的 API 來執行 GET、POST、PUT、DELETE 等各種 HTTP 請求，

另外既然是使用 Promise，當然就可以使用像是 .then、.catch 等非同步操作語法，

也可以在發送 request 之前、或是獲得 response 之後，進行轉換資料的操作。

Axios 載入之後，可以直接使用像是 axios.get 的方式直接去獲取遠端資料，

從範例中可以看到利用 Axios 很簡單的撈取遠端的資料：

而 Axios 常見的請求方式總共有五種：

axios.get(url, config);

axios.post(url, data, config);

axios.put(url, data, config);

axios.delete(url, config);

axios.patch(url, data, config);

上文中有提到，獲得 response 之後，可以在 .then 中獲得以下的資訊，可以參考下面範例：

透過預設配置，可以對每個請求設定一個共用的配置，例如：伺服器位址、Header 抬頭等。

可以參考範例：

操作這個模板執行以下要求（只能操作 script 的部分）：

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

Image Not Showing Possible Reasons