---
# System prepended metadata

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

---

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

## 新增資料

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

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

---

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

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
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]() |

-->