# 🏅Day 11 - 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>

---

題目
---

請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/MWNGZXX)，並且完成以下條件：

* 利用 `axios.get` 的方法撈取「高雄旅遊網的資料」的資料，並且將回傳的資料利用 `console.log` 呈現出來即可。
* 利用 `catch` 的方式去接收錯誤訊息。

## 回報流程

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


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

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/azoygzJ?editors=0011) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/MYgEYBX?editors=0012) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/OPLxPap) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/wBwrBbr?editors=1111)|
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/XJrebrQ?editors=0011) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/zxOEGrg) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/pvzWvXZ?editors=1111)|
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/NPKaqbz?editors=1112)|
|Aaron 謝宗佑|[CodePen](https://codepen.io/aaron-hsieh/pen/pvzWJdY)|
| Nocab |[CodePen](https://codepen.io/PeihanWang/pen/ByBwNxV?editors=0012)|
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/mybBJgx) |
| Toung | [CodePen](https://codepen.io/Toung/pen/qEWPEKz) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/PwYJPGX) |
| 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/RNbLrpw) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/mybBPqB) |
| Kaya | [CodePen](https://codepen.io/kayaribi/pen/bNboejG) |
| andy | [CodePen](https://codepen.io/andygggg/pen/YPKrWbB?editors=1111) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/xbKXEwa) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/wBwrzzW?editors=1111) |
| 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/gbYGWKv?editors=0011) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/KwPXmxE?editors=1112) |
| lobinda | [CodePen](https://codepen.io/Lobinda/pen/GgKMmPQ) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/QwLqvJY) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/LEPzyqW?editors=1011) |
|ollie| [CodePen](https://codepen.io/daiyy97/pen/jENGwgM?editors=0012)|
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/XJreaOo) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/qEWPKmO) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/zxOEaax?editors=1111) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/day-11-axios-ji-ben-jie-shao-shi-yong-3svttf) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/jENGvJY) |
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/EaYwdJP?editors=1111) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/wBwrbJP) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/raBGXBz?editors=1111) |
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/KwPXdQV?editors=1111)|
|Jun| [Codepen](https://codepen.io/jun12079/pen/yyBPOXR)|
|Johnson| [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/LEPOmdM)|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/pvzpZEG?editors=1111) |
|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/xbKPbmM?editors=1011)|
| celine | [CodePen](https://codepen.io/szuning/pen/OPLxRJP) |
| Michelle0417 | [CodePen](https://codepen.io/michelle0417/pen/OPLQgYo) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/dPbmBXb?editors=0011) |
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/yyBjWQM?editors=1012)|
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/ZYzMjqJ?editors=1111) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/WbeBWGz?editors=1112)
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/WbNEyMr?editors=0011) ||
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/jEOKVbm?editors=1112) ||
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/azbPvyG?editors=1111) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/yyyKxBj?editors=0012) |
<!-- 快速複製
| user | [CodePen]() |

-->