---
# System prepended metadata

title: "\U0001F3C5Day 14 - Axios 基礎練習 (4) - 刪除資料功能"
tags: [React 直播班 - 2024 冬季班]

---

## 刪除資料

刪除資料資料時，我們會使用 `DELETE` 的方式，並且後方會帶上要刪除產品資料的 ID

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

axios.delete(`${url}/${ 要刪除產品的id }`, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料刪除成功:', response.data);
  })
  .catch(error => {
    console.error('刪除資料時發生錯誤:', error);
  });
```

題目
---
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/XWvqQbE?editors=1010)，完成刪除資料功能，並且能夠取得全部資料呈現在畫面之上。

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

## 回報流程

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

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

<!-- 解答：
const deleteTodo = async(id) => {
  const response = await axios.delete(`${api}/todos/${id}`, {
    headers: {
      Authorization: token.value,
    },
  });
  getTodos();
}
-->

回報區
---

|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/OPLxdWj?editors=1011) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/xbKXBgq) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/jENGJVg?editors=1010) |
| Jasmine | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/pvzWYRo) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/JoPrzbN) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/LEPzaee?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/gbYGEeZ?editors=1011)|
| Toung | [CodePen](https://codepen.io/Toung/pen/pvzWmzV) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/OPLxYXg) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/ogvGrLe) |
|邵|[Page](https://instantcheeseshao.com/ReactDailyWork/) [Repo](https://github.com/oxfoxlion/ReactDailyWork)|
|Noy(Toad)| [Codpene](https://codepen.io/MochiCodingPen/pen/yyBzdwa?editors=1010) |
|Kaya| [Codpene](https://codepen.io/kayaribi/pen/azoLeyj) |
| Rothy | [Codpene](https://codepen.io/ChloeHsu1/pen/WbeXerd) |
| 嚼勁先生 | [Codpene](https://codepen.io/James520284/pen/EaYbWXL) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/gbYXReB?editors=0010) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/ZYzaxNp?editors=1011) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/WbeXLQv) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/yyBpLGN) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/OPLzyBa) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/PwYEdPV?editors=1010) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/QwLaXWx?editors=0011) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/XJrEYVZ) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/raBdzZW) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/bNbMboV) |
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/WbeyZRV) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/LEPoKyM?editors=1011) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/ogNGMQv?editors=0011) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/JojZLdj?editors=1012) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/dPywmvq?editors=1011) |
<!-- 

 | user | [CodePen]() |

-->