# 🏅Day16 - Axios 基本介紹使用 # Axios 在開始實作註冊功能之前，需要先了解 `Axios` 這個第三方套件： `Axios` 是基於 `Promise` 的 HTTP 請求庫的設計，使得開發者可以輕鬆地與後端 `API` 進行串接， 比起 `AJAX` 更輕量化，且寫起來更加的直接、閱讀性更好。 它提供了簡單的 `API` 來執行 `GET`、`POST`、`PUT`、`DELETE` 等各種 `HTTP` 請求， 另外既然是使用 `Promise`，當然就可以使用像是 `.then`、`.catch` 等非同步操作語法， 也可以在發送 `request` 之前、或是獲得 `response` 之後，進行轉換資料的操作。 ## Axios 基本使用 `Axios` 載入之後，可以直接使用像是 `axios.get` 的方式直接去獲取遠端資料， 從範例中可以看到利用 `Axios` 很簡單的撈取遠端的資料： <iframe height="300" style="width: 100%;" scrolling="no" title="axios.get 範例" src="https://codepen.io/yen-kg/embed/vYwooPO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/vYwooPO"> axios.get 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- 而 Axios 常見的請求方式總共有五種： * GET：從伺服器獲取數據。 ``` axios.get(url, config); ``` * POST：向伺服器提交數據。 ``` axios.post(url, data, config); ``` * PUT：更新伺服器上的數據。 ``` axios.put(url, data, config); ``` * DELETE：刪除伺服器上的數據。 ``` axios.delete(url, config); ``` * PATCH：部分更新伺服器上的數據。 ``` axios.patch(url, data, config); ``` ## Axios Response 結構 上文中有提到，獲得 `response` 之後，可以在 `.then` 中獲得以下的資訊，可以參考下面範例： <iframe height="300" style="width: 100%;" scrolling="no" title="axios 範例 (1)" src="https://codepen.io/yen-kg/embed/jOjOveV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/jOjOveV"> axios 範例 (1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## Axios config 配置 ### 預設配置 透過預設配置，可以對每個請求設定一個共用的配置，例如：伺服器位址、`Header` 抬頭等。 可以參考範例： <iframe height="300" style="width: 100%;" scrolling="no" title="axios 範例 (1)" src="https://codepen.io/yen-kg/embed/YzozJKo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yen-kg/pen/YzozJKo"> axios 範例 (1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- 題目 --- 操作 [這個模板](https://codepen.io/yen-kg/pen/mdZdzwV?editors=0010) 執行以下要求（只能操作 script 的部分）： * 利用 `axios.get` 的方法撈取「高雄旅遊網的資料」的資料，並且將回傳的資料利用 `console.log` 呈現出來即可。 * 利用 `catch` 的方式去接收錯誤訊息。 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： axios.get(api).then((res) => { console.log(res); }) .catch(error => { console.error('Error:', error); }); --> 回報區 --- | Discord | CodePen / 答案 | |:----------------:|:-------------------------------------------------------------------:| | Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/gONKEVo?editors=0011) | | Eric0823 | [CodePen](https://codepen.io/a7901477/pen/mdZXmOO) | | anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/WNqMjOJ) | | mu mu | [CodePen](https://codepen.io/ishuki916/pen/ExBQmEx?editors=0010) | | Aden | [CodePen](https://codepen.io/Osases/pen/rNEJmKX) | | Hilda | [Codepen](https://codepen.io/vwquikad-the-vuer/pen/poXaPxG) | | Tough life | [CodePen](https://codepen.io/hakuei0115/pen/rNEJmXa) | | rjjq | [CodePen](https://codepen.io/rjjq/pen/dyBdRMz)| | dodo | [CodePen](https://codepen.io/MissDouble/pen/oNrEeVK?editors=1011) | | imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/eYwVGMa?editors=0010) | | 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/PorQJRJ?editors=0011) | | Ariel | [CodePen](https://codepen.io/ariel0510/pen/GRbQMLy?editors=0012) | | Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/oNrEpqV?editors=0011) | |好了啦|[CodePen](https://codepen.io/j-z-the-flexboxer/pen/BagYVaW)| | KK | [CodePen](https://reurl.cc/WN11GL) | | SKey | [CodePen](https://codepen.io/Dale-Chien/pen/GRbxRoQ) | | 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/MWMVYBE) | | Barry1104 |[CodePen](https://codepen.io/barry1104/pen/bGPvgpx?editors=0011) | | 末次 |[CodePen](https://codepen.io/yunjulee/pen/zYVWNyN) | | Shin | [CodePen](https://codepen.io/shin9626/pen/gONemdO) | | Timo | [CodePen](https://codepen.io/timothy833/pen/eYwMWOr?editors=0010) | | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/LYKdjNm?editors=0010)| | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/xxoWLzJ?editors=0010) | | Renee | [Codepen](https://codepen.io/renee_wu/pen/JjQLOVy?editors=0111) | | Cami | [CodePen](https://codepen.io/irisLife/pen/BagxxjM)| | Zhen | [CodePen](https://codepen.io/yunnnz/pen/rNEKBBG?editors=0011)| | World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/qBzKLPj?editors=0012)| | Mars | [CodePen](https://codepen.io/MarsKuo/pen/zYVLWMV)| | anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/rNEZvaR)| | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/PorydJj) | | duchi | [CodePen](https://codepen.io/sqaz0502/pen/qBzLaav?editors=1011)| | Ching | [CodePen](https://codepen.io/huangching/pen/KKjJmge) | | Triple | [CodePen](https://codepen.io/riku30/pen/oNKLjQL) | | Eden |[Codepen](https://codepen.io/iseden/pen/rNXjZmQ)| <!-- | user | [CodePen]() | -->