最近才开始学 nuxt3 ,数据请求上感觉和之前写 vue 有些不太一样,很多教程里使用 useFetch 之类的要么是调一个示例 url ,要么是调 server 目录里的接口,如果是对接后端同事的接口,难道把已有的接口要自己往 server/api 目录里再写一遍嘛,但是封装的话,useFetch 之类的只能写在 setup 里,研究这些文档头都大了😅 有没有已经有项目经验的大佬教下怎么处理数据请求封装 /api 统一管理
1
lyc575757 2023-01-26 08:37:50 +08:00 via Android
nuxt3 内置了一个$fetch 方法,可以在 ts 文件中使用
https://nuxt.com/docs/getting-started/data-fetching#directly-calling-an-api-endpoint 如果用不惯,把 vue 项目中封装的 axios 直接迁移过来应该也是没问题的 server/api 里更多是处理跨域请求吧,如果不存在跨域问题,没必要让请求从 server 转发一遍 |
2
arnosolo 2023-01-26 09:33:24 +08:00 via iPhone
你这个就是观念没转过来。ssr 是这样的,数据由渲染服务器请求(/server )后组装出一个有数据的 html 文件以后再发给前端。如果前端还要进一步修改数据,则讲相关逻辑写着 onMounted 里面。
|
3
arnosolo 2023-01-26 09:39:24 +08:00 via iPhone
https://fireship.io/lessons/nuxt-3-firebase/ 这篇文章虽然用的是 firebase 。但是有助于帮助你理解哪些请求就是渲染服务器发出的哪些请求是浏览器发出的。
|
4
PqgpNgA0wk OP |
5
liuchengfeng1 2023-08-30 22:29:29 +08:00
server/api.js 的意思就是把自己的项目做成一个接口是吧...别人可以调自己的方法
|
6
PqgpNgA0wk OP @liuchengfeng1 有点这个意思, 我一开始想着依照之前的静态站的写法要封装请求方法, 统一管理 api 接口
|
7
xppgg 307 天前 via iPhone
@PqgpNgA0wk 打扰一下 请教一个问题 遇到过 nuxt3 fetch failed 的问题吗
|
8
PqgpNgA0wk OP @xppgg 有什么报错信息吗
|
9
xppgg 302 天前
@PqgpNgA0wk 已经解决了 感谢回复
|
10
seekafter 251 天前
如果一个外部的 api 接口,是放在 server 里面还是直接 vue 文件里用$fetch 发送
|
11
PqgpNgA0wk OP @seekafter 取决于你的业务,放 server 目录下等于自己再套了一层,可以扩展的变量就多了
|
12
seekafter 242 天前
@PqgpNgA0wk 请问在 server 目录下的接口怎么互相调用呢?用 userFetch 吗? 我怎么有时候能成功,有时候不行呢
|
13
PqgpNgA0wk OP @seekafter server 端直接 fetch / $fetch 就可以
|
14
crocoBaby 239 天前
我觉得全部通过 serve 包好一点,统一处理
|
15
PqgpNgA0wk OP @crocoBaby 看项目吧,再 server 里包一层太耗心智了😂,目前的项目除了全栈的都直接前端调目标接口
|