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