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

## 新增資料

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

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

---

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

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

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

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)|