# 🏅 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)|