---
# System prepended metadata

title: "\U0001F3C5Day 11 - Axios 基礎練習 (1) - 基本介紹使用"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day 11 - Axios 基礎練習 (1) - 基本介紹使用

# 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` 的方式去接收錯誤訊息。


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

| 名字         | 連結                                                                             |
| ------------ | -------------------------------------------------------------------------------- |
| Zem          | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/MYewKXQ)                      |
| Owen He      | [Codepen](https://codepen.io/owen1120/pen/zxBGrLJ?editors=1111)                  |
| cks40660     | [Codepen](https://codepen.io/CKS40660/pen/myEJVZP)                               |
| Nooooora     | [CodePen](https://codepen.io/Nora-Ch/pen/PwzqNYb)                                |
| Eileen       | [CodePen](https://codepen.io/Eileen-io/pen/wBWaGwd)                              |
| Tetsu        | [Codepen](https://codepen.io/ttgchang/pen/KwMpzPQ)                               |
| 7Red         | [Codepen](https://codepen.io/cch2655/pen/ByzNKoZ)                                |
| 老屠         | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/GgqgbQw?editors=0011)     |
| Chia         | [Codepen](https://codepen.io/Chia-the-encoder/pen/zxBxLvK)                       |
| Marco        | [Codepen](https://codepen.io/MarcoChiu/pen/bNedpeY)                              |
| jchunnn      | [Codepen](https://codepen.io/jchunnn/pen/emzNZoO)                                |
| 舜仁         | [Codepen](https://codepen.io/shunjen/pen/dPXoMxW)                                |
| 星雪糖       | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ByzNKgP?editors=1011)     |
| 叮咚         | [Codepen](https://codepen.io/pinchieh-lin/pen/raLVepg)                           |
| RUDY         | [Codepen](https://codepen.io/Rudy-crw/pen/ZYOGpWy?editors=0011)                  |
| Melanie      | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/KwMpgym)                  |
| Jenna        | [Codepen](https://codepen.io/abiscc14/pen/NPrqRQv)                               |
| 小懿         | [Codepen](https://codepen.io/YT-the-vuer/pen/VYjLmyK?editors=0012)               |
| 地瓜         | [Codepen](https://codepen.io/ChippyYU/pen/gbMpObK)                               |
| 平平         | [Codepen](https://codepen.io/ypinpin/pen/OPXVbKE)                                |
| 7lun         | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/yyJNMBV?editors=1111)         |
| Percy        | [Codepen](https://codepen.io/Percy-Ku/pen/bNedqVd?editors=1010)                  |
| 社子畢卡索   | [Codepen](https://codepen.io/pen?template=OPXVpzy)                               |
| kashiwatei   | [Codepen](https://codepen.io/kashiwatei/pen/MYewpvv)                             |
| An           | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/RNRPpQb?editors=1111)      |
| Jin          | [Codepen](https://codepen.io/Jin-L/pen/XJKbMLx)                                  |
| 登登登       | [Codepen](https://codepen.io/Duncanin/pen/pvbJRmb?editors=0011)                  |
| cindy        | [Codepen](https://codepen.io/a50134/pen/gbMpWwg?editors=0011)                    |
| Rogan        | [Codepen](https://codepen.io/RoganHsu/pen/Pwzqmjj?editors=1112)                  |
| Mikka        | [Codepen](https://codepen.io/KamiLiu/pen/NPrqgNo?editors=1111)                   |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/GgqJEOX?editors=1111)        |
| Tanuki       | [Codepen](https://codepen.io/tanuki320/pen/myEJwPx?editors=1011)                 |
| FangFang     | [Codepen](https://codepen.io/Fang-the-selector/pen/KwMpqJd?editors=1112)         |
| andy         | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/JoKdyMm?editors=0010)     |
| Vergil       | [CodePen](https://codepen.io/aglgvsie/pen/OPXVxvO)                               |
| wind         | [CodePen](https://codepen.io/wind7y/pen/JoKdrzX)                                 |
| Eric         | [Codepen](https://codepen.io/wc-su/pen/dPXomWV)                                  |
| CharisLai    | [Codepen](https://codepen.io/charislai/pen/EayjNWB)                              |
| RyanC        | [Codepen](https://codepen.io/RyanYD/pen/WbxvzJV)                                 |
| Naojun       | [Codepen](https://codepen.io/NAOJUN/pen/VYjLXOB)                                 |
| ZoeKang      | [Codepen](https://codepen.io/byehywmx-the-animator/pen/MYewmoz)                  |
| KOMATSU PEI  | [Codepen](https://codepen.io/Komatsu2021/pen/ogLXqzw?editors=0011)               |
| Sherry       | [Codepen](https://codepen.io/twvyqojd-the-typescripter/pen/YPWXLgK?editors=1010) |
| JiaMori      | [Codepen](https://codepen.io/jiamori/pen/bNeVpzv)                                |
| nonwa_jeff   | [Codepen](https://codepen.io/nonwaaa/pen/vEKNmjK)                                |
| Wafa         | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/XJKmRgo?editors=1111)      |
| Michelle     | [Codepen](https://codepen.io/bastar_dize/pen/pvbjabp?editors=1111)               |
| 小趴         | [Codepen](https://codepen.io/papa2415/pen/vEKNzNa)                               |
| Leonard      | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/JoKYwza?editors=1111)         |
| kuolun       | [Codepen](https://codepen.io/kuolun/pen/dPXGKzE?editors=0011)                    |
| 蛋白         | [Codepen](https://codepen.io/sjlu-0/pen/dPXGgay)                                 |
| 伊迪         | [Codepen](https://codepen.io/sorryFish/pen/bNeByGj)                              | 
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/bNeWeZG?editors=1111)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/QwEMXYY?editors=1012)|


