# 🏅Day17 - 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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
axios.get(api).then((res) => {
console.log(res);
})
.catch(error => {
console.error('Error:', error);
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/azvKGvy) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/ZYbRoQB?editors=0012) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/WbQyJJw?editors=0011) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/ogjydyQ?editors=0011) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/KwdeRxa?editors=0012) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/GgpGBJM) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/xbwzJww?editors=0012) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/ByoVObj?editors=0012) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/YPyvRXN) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/NPGzeJr?editors=0011) |
| DaRon | [CodePen](https://codepen.io/daron0811/pen/dPYKaYB) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/WbQymZL?editors=0110) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/GgpGLQa?editors=0010) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/RNWJmaN?editors=0010) |
| Eden | [Codepen](https://codepen.io/iseden/pen/yyYqebJ) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/YPyjwJB?editors=0011) |
| Clarence | [Codepen](https://codepen.io/Clarence-Lin/pen/WbQKYpy) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/YPyjRdx?editors=0011) |
| dean | [Codepen](https://codepen.io/ch933114/pen/xbwyEqE?editors=0011) |
| 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/NPGOLbO?editors=0010) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/PwPyrpz?editors=0011) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/zxvMPvj?editors=0012) |
|Joe|[CodePen](https://codepen.io/wasp33/pen/xbwQvvR?editors=0011)|
|Momoze|[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/GgpPEzo?editors=0012)|
<!--

| user | [CodePen]() |

-->