---
# System prepended metadata

title: "\U0001F3C5 Day 23 - 非同步錯誤管理"
tags: [Node.js 直播班 - 2024 春季班]

---

# 🏅 Day 23 - 非同步錯誤管理

在二到四週主線任務中，我們會使用 `try catch` 處理 async function 中的錯誤，當 `try {...}` 中執行的程式發生錯誤就會跑到 `catch`
目前每個非同步函式中都各有 `try catch`，可以嘗試將執行非同步函式的錯誤一併接到 function 中處理，以減少每次加上 `try catch` 的動作 

範例：
```javascript
// handleErrorAsync.js
const handleErrorAsync = function handleErrorAsync(func) {
  return function (req, res, next) {
    func(req, res, next).catch(
      function (error) {
        return next(error);
      }
    );
  };
};

module.exports = handleErrorAsync;
```
將 `handleErrorAsync()` 加入 router 中執行

```javascript
// routes/posts.js 
// 以取得貼文為例
router.get('/', handleErrorAsync(async (req, res, next) => {
  ...
  const post = await Post.find();
  res.status(200).json({
    status: 'success',
    results: post.length,
    data: {
      post
    }
  });
}));
```


運作流程為：
- 將非同步函式傳入 `handleErrorAsync()` 並在其中回傳 `function(req, res, next) {...}` 接收 router 的資料 `req, res, next`
- 再執行傳入的 function，並接上 `catch()`，當傳入的非同步 function 在執行上出錯時，就會統一跑到 `handleErrorAsync()` 的 catch
- 在 `catch()` 中會再執行一個 function 並把 error 資料透過 `next()` 交給 app.js 中的[錯誤處理 middleware](https://github.com/gonsakon/express-week4-sample/blob/week5/app.js#L47-L86)

可觀看完整 [GitHub](https://github.com/gonsakon/express-week4-sample/tree/week5)  範例 

### 參考資源

- [Express 錯誤處理](https://expressjs.com/zh-tw/guide/error-handling.html)


題目
---
嘗試參考上方介紹的方式，延續 Day21 題目，嘗試將 `try ... catch` 移除並在 router 加入 `handleErrorAsync()` 當新增貼文發生錯誤時（eg. 新增貼文格式錯誤），可透過此 middleware 接到 catch 並由 app.js 中的錯誤處理 middleware 回傳錯誤訊息


## 回報流程

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

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

<!-- 解答：  

```javascript=
router.post('/', handleErrorAsync(async (req, res, next) =>  {
  const data = req.body;
  if (!data.content) {
    // appError 自訂錯誤回饋
    return next(appError(400, '欄位未填寫正確：貼文內容為必填', next));
  }
  const newPost = await Post.create(
    {
      user: data.user,
      content: data.content,
      tags: data.tags,
      type: data.type
    }
  );
  res.status(200).json({
    status: 'success',
    data: newPost
  });
}));
```
-->




回報區
---
<!-- 
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

|    Discord    |   CodePen ／ 答案  |
|:-------------:|:-----------------:|
| xxx | [CodePen]() |
| 2魚 | [CodePen](https://codepen.io/ijrekmsn-the-sans/pen/dyLBWZy) |
| 苡安 | [hackmd](https://hackmd.io/@L7K9-66lSeagS28AP0_GjQ/SJO93irG0) |
| jenny7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/LYvwOqx) |
| william威良 | [CodePen](https://codepen.io/snowman12320/pen/xxevpdr?editors=1010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/MWRNrQe) |
| Aida | [CodePen](https://codepen.io/ada23410/pen/wvZVpbv?editors=0011) |
|Lobinda|[HackMD](https://hackmd.io/@Lobinda/ByqSiZUGR)|
|wei|[HackMD](https://hackmd.io/@xu7yoa5cSsqaron7h9XhUw/H1-VJf8MA)|
|Tiya|[CodePen](https://codepen.io/Tiya_blank/pen/rNbQPbY)|
|ej_chuang|[CodePen](https://codepen.io/EJChuang/pen/QWPeBVJ)|
|tung030374|[CodePen](https://codepen.io/tung__u/pen/MWRNZEK?editors=0010)|
|william_hsu|[CodePen](https://codepen.io/william8815/pen/WNBegzB)|
| Hank |[CodePen](https://codepen.io/tw1720/pen/rNgNVVj)|
|Mei|[CodePen](https://codepen.io/l_umei/pen/rNgaGWL)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/wvbBZGq)|
|zaoannihao|[Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/WNBwjpd?editors=0010)
| fabio20 | [CodePen](https://codepen.io/fabio7621/pen/zYQKZoN) |