---
# System prepended metadata

title: "\U0001F3C5Day 13 - Axios 基礎練習 (3) - 新增資料功能"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day 13 - Axios 基礎練習 (3) - 新增資料功能

## 新增資料

在 Day12 有介紹到如何註冊登入，這邊會往下繼續做新增功能。

**提醒一下，必須要先[註冊](https://codepen.io/fhljksmg-the-styleful/pen/jEqgPdM)一個帳號，接著登入到後台才能使用新增資料！**

---

通常在新增資料的時候，我們會使用 `POST` 的方式，並且後面帶上 `data` 資料、以及 `token` 密鑰

而這一組 `token` 密鑰是我們在登入的時候取得的，如果沒有這一組 `token`，

我們會沒有權限新增資料唷！

```js
const url = "example/api";

axios.post(url, data, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料新增成功:', response.data);
  })
  .catch(error => {
    console.error('新增資料時發生錯誤:', error);
  });
```

題目
---
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/gOVzqBz)，並且完成以下條件：
* 完成新增資料功能，並且將資料存在 `todos` 的陣列中。
* 完成取得全部的資料，並在新增資料後，能夠更新畫面。

備註：[詳細可以參考 API 文件](https://todolist-api.hexschool.io/doc/#/%E4%BB%A3%E8%BE%A6%E4%BA%8B%E9%A0%85/post_todos_)


<!-- 解答：
  const addTodo = async () => {
    if (!newTodo) return;
    const todo = { content: newTodo };
    try {
      await axios.post(`${api}/todos`, todo, {
        headers: { Authorization: token }
      });
      setNewTodo("");
      getTodos(token);
    } catch (error) {
      console.error("新增資料失敗", error);
    }
  };

  const getTodos = async (authToken) => {
    try {
      const response = await axios.get(`${api}/todos`, {
        headers: { Authorization: authToken }
      });
      setTodos(
        response.data.data.map((todo) => ({ ...todo, isEditing: false }))
      );
    } catch (error) {
      console.error("取得資料失敗", error);
    }
  };

-->

| 名字        | 連結                                                                         |
| ----------- | ---------------------------------------------------------------------------- |
| Nooooora    | [Codepen](https://codepen.io/Nora-Ch/pen/myEJZgz?editors=1111)               |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/WbxvVeN?editors=0010)              |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/gbMpNNq)                              |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/RNRPXbq)                   |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/PwzqMKY)                          |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/dPXoBrm)                          |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/VYjLobq?editors=0011)              |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/PwzqMJY?editors=0011) |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/OPXVKmL)                            |
| Miikaa      | [Codepen](https://codepen.io/Miikaa/pen/zxBGgRW)                             |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/ogLjvmx)                            |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/RNRWbXg)                           |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/pvbjJya?editors=0010)              |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/KwMdPKy)              |
| cindy       | [Codepen](https://codepen.io/a50134/pen/MYeawdx?editors=0010)                |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/KwMdKvj)                              |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/RNRWWaL?editors=1010)     |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/MYeaaNy?editors=1010)            |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/KwMddEw?editors=0011)           |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/wBWKWqY)                           |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/QwEjKXv)              |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/VYjvpgN)                           |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/wBWKdao?editors=0010)              |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/yyJYMVaz)                          |
| An          | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPWyQKN?editors=1011)  |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/KwMdqQj?editors=1010)  |
| wind        | [Codepen](https://codepen.io/wind7y/pen/emzpRXZ)                             |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/zxBvdgL?editors=1011)              |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/emzpWNr)                            |
| nonwa_jeff  | [Codepen](https://codepen.io/nonwaaa/pen/azZvEZL)                            |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/VYjvzER)                            |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/ZYObJbp)              |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/JoKdQwy?editors=0011)           |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/wBWKEew)                           |
| RyanC       | [Codepen](https://codepen.io/RyanYD/pen/xbOwybQ)                             |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=myEJjbq)                           |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/pvbjMPy?editors=1010) |
| Zem         | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/OPXMmRM)                  |
| kuolun      | [Codepen](https://codepen.io/kuolun/pen/emzJjbY?editors=0011)                |
| Leonard     | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/NPrxEry?editors=0011)     |
| 叮咚        | [Codepen](https://codepen.io/pinchieh-lin/pen/XJKbLyN)                       |
| Vergil      | [CodePen](https://codepen.io/aglgvsie/pen/azZvdXa)                           |
| 蛋白        | [CodePen](https://codepen.io/sjlu-0/pen/NPrNBqv)                             |
| tanuki      | [CodePen](https://codepen.io/tanuki320/pen/emzZMRx?editors=0010)             |
| 伊迪        | [CodePen](https://codepen.io/sorryFish/pen/QwEdqGz)                          | 
|TWLeoC|[CodePan](https://codepen.io/TWLeoC/pen/YPWVOab?editors=1011)|
|Michelle|[CodePan](https://codepen.io/bastar_dize/pen/XJKgQQZ?editors=0011)|
|Wen|[CodePen](https://codepen.io/hsiao-kevin/pen/RNRLMbW?editors=1010)|