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

## 新增資料

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

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

---

通常在新增資料的時候，我們會使用 `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_)

## 回報流程

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


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

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

-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/mybBbYL?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/WbeZyQM?editors=1011)|
| Nocab |[CodePen](https://codepen.io/PeihanWang/pen/JoPrZXj?editors=1011)|
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/WbeZymL) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/RNbLBPM) |
| Jasmine | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/zxOEaEO) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/wBwrXdy?editors=1010) |
| Kaya | [CodePen](https://codepen.io/kayaribi/pen/ZYzXmGY) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/YPKrRqY) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/jENGKGe) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/MYgEmxg?editors=0011) |
|邵|[Page](https://instantcheeseshao.com/ReactDailyWork/) [Repo](https://github.com/oxfoxlion/ReactDailyWork)|
| Toung | [CodePen](https://codepen.io/Toung/pen/qEWPvOr) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/LEPzvjq) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/gbYGJyv) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/zxOPrQM) |
| 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/jENaqeQ) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/KwPymwQ?editors=1010) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/jENaYrr?editors=1111) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/wBwPXwg) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/KwPyRGq) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/NPKwROd) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/mybpjoK?editors=0110) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/LEPeEBX?editors=0011) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/ByBxBZa) |
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/QwLrXLG)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/ByBVBQE?editors=0011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/ByBeEmY?editors=1011) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/gbOGroy?editors=0111) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/QwWxGJQ?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/jEOXZjO?editors=1111) |
<!--

| user | [CodePen]() |

-->