---
# System prepended metadata

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

---

# 🏅Day 14 - Axios 基礎練習 (4) - 刪除資料功能

## 刪除資料

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

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

axios.delete(`${url}/${ 要刪除產品的id }`, {
    headers: {
      Authorization: token,
    },
  })
  .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_)


<!-- 解答：
  const deleteTodo = async(id) => {
    try {
      const response = await axios.delete(`${api}/todos/${id}`, {
        headers: {
          Authorization: token,
        },
      });
      getTodos(token);
    } catch (error) {
      console.error('刪除資料失敗', error);
    }
  }
-->


| 名字        | 連結                                                                         |
| ----------- | ---------------------------------------------------------------------------- |
| Nooooora    | [Codepen](https://codepen.io/Nora-Ch/pen/QwEjpxK?editors=1111)               |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/JoKYWwm)                           |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/MYeapGo?editors=1010)           |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/bNeVVrO)                   |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/azZvWbQ?editors=1010)              |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/RNRWVKW?editors=0010)              |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/myEemeJ?editors=0010) |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxBvwmQ?editors=0010)     |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/ogLjWmb)                           |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/xbOwqMa)                          |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/QwEjgKz?editors=0010)              |
| An          | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/WbxQOZP?editors=0010)  |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/GgqpEVw)                          |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/MYeavYy?editors=0010)  |
| wind        | [Codepen](https://codepen.io/wind7y/pen/ogLjebd)                             |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/myEeMmo?editors=0010)              |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/RNRWZXb?editors=0011)              |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/XJKmeXP?editors=1011)              |
| Miikaa      | [Codepen](https://codepen.io/Miikaa/pen/WbxQeEd)                             |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/ZYObXNP)                            |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/emzpeGm?editors=1011)            |
| cindy       | [Codepen](https://codepen.io/a50134/pen/EayVbdN?editors=0011)                |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/LEZpeNd)              |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/pvbjVaN)                            |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/pvbjVdE)                              |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/emzprLG)              |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/dPXYKQY)              |
| Tetsu       | [codepen](https://codepen.io/ttgchang/pen/MYeaBqW)                           |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/EayVwNG)                              |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/MYeaqrJ)                            |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/RNRWYyO)                            |
| RyanC       | [Codepen](https://codepen.io/RyanYD/pen/bNeVmVB)                             |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=myEJjbq)                           |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/yyJYmjV?editors=0010) |
| Zem         | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/XJKXRaB)                  |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/MYeKGPb?editors=1011)           |
| kuolun      | [Codepen](https://codepen.io/kuolun/pen/ByzjOXy?editors=0011)                |
| 叮咚        | [Codepen](https://codepen.io/pinchieh-lin/pen/NPrNXzZ?editors=1010)          |
| Vergil      | [CodePen](https://codepen.io/aglgvsie/pen/ByzKNxz)                           |
| 蛋白        | [CodePen](https://codepen.io/sjlu-0/pen/JoKXBNP?editors=1010)                |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/KwMMwKJ)                           |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/dPXXopq?editors=1010)             |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/yyJgmbv)                          | 
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/jErwrmR?editors=1011)|
|Michelle|[Codepan](https://codepen.io/bastar_dize/pen/YPWxENN?editors=1010)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/MYeELQv?editors=1011)|