
现在手头的一个项目需要从零开始
现在搭的项目结构为:
src ├── api │ ├── auth │ └── index.ts ├── components │ ├── A │ ├── B │ └── C ├── pages │ ├── APage │ ├── BPage │ └── CPage ├── route.tsx ├── store │ ├── XXX │ └── XXX └── utils 技术栈为:vite + tailwindcss + nextui + zustand + axios
问题 1:这套项目结构和技术栈有什么问题吗
问题 2:在使用过程中 api 出错式报错的 alert 应该采取什么方案,我现在是错误边界来处理组件本身的异常错误,window.onunhandledrejection 来捕获 api 错误,有没有什么更优雅的 api 报错方案
1 shipLoad 2024-01-22 17:11:08 +08:00 第一个问题 项目结构和技术栈目前来说已经够用了 基本上都是新的技术 没什么问题 第二个问题 axios 里面有内部的 error 接口 你可以去 axios 文档看看 |
2 XCFOX 2024-01-22 17:38:51 +08:00 我建议你放弃思考直接用框架的答案。 如果当前项目是基于 React-Router 的话上 remix: https://remix.run/ 不然的话直接上 https://nextjs.org/ 啥目录结构、错误处理框架都给你安排得明明白白: https://remix.run/docs/en/main/guides/errors https://nextjs.org/docs/app/building-your-application/routing/error-handling |
3 iGmainC OP @shipLoad 请教一下,如果 api 有报错,我是应该包成统一的 ApiError 格式往上 throw ,监听那里接到就按照错误渲染 alert ,还是应该搞一个 store ,报错之后往 store 里塞错误信息 |
5 vance123 2024-01-22 21:38:56 +08:00 无所谓的,能跑起来就行,将来慢慢优化 |
6 stimw 2024-01-22 23:43:31 +08:00 如果是 TypeScript ,那么 router 更推荐 https://tanstack.com/router/v1 React Router 这个逆天库已经不想评价了。。 然后新项目的话可以无脑 nextjs ,也不需要关心 router 。 我不太喜欢 nextui ,shadcn 自主性更强一点。不过这个见仁见智。 |
7 stimw 2024-01-22 23:47:16 +08:00 api 错误是指 fetch 报错? 新项目的话纯 axios 也可以扔了,看一下 react-query (一天内足够)。 |
8 looplj 2024-01-23 10:35:17 +08:00 react-query 内部再使用 axios ,而不是自己 useEffect 套 axios 。 react-query 有 onError ,axios 也有 interceptors 可以统一处理报错 |