nuxt3 请求数据的最佳实践是什么

[PqgpNgA0wk]

最近才开始学 nuxt3 ，数据请求上感觉和之前写 vue 有些不太一样，很多教程里使用 useFetch 之类的要么是调一个示例 url ，要么是调 server 目录里的接口，如果是对接后端同事的接口，难道把已有的接口要自己往 server/api 目录里再写一遍嘛，但是封装的话，useFetch 之类的只能写在 setup 里，研究这些文档头都大了😅 有没有已经有项目经验的大佬教下怎么处理数据请求封装 /api 统一管理

[lyc575757]

nuxt3 内置了一个$fetch 方法，可以在 ts 文件中使用
https://nuxt.com/docs/getting-started/data-fetching#directly-calling-an-api-endpoint

如果用不惯，把 vue 项目中封装的 axios 直接迁移过来应该也是没问题的

server/api 里更多是处理跨域请求吧，如果不存在跨域问题，没必要让请求从 server 转发一遍

[arnosolo]

你这个就是观念没转过来。ssr 是这样的，数据由渲染服务器请求（/server ）后组装出一个有数据的 html 文件以后再发给前端。如果前端还要进一步修改数据，则讲相关逻辑写着 onMounted 里面。

[arnosolo]

https://fireship.io/lessons/nuxt-3-firebase/ 这篇文章虽然用的是 firebase 。但是有助于帮助你理解哪些请求就是渲染服务器发出的哪些请求是浏览器发出的。

[PqgpNgA0wk]

@lyc575757
@arnosolo
感谢两位解答，又研究了一天，发现如果封装 ofetch 的话，服务端客户端都会请求一遍，可能是我写的不对，索性放弃封装了😅
现在写了个脚本用 nunjucks 把后端接口文档导出的 json 生成为 /server/api 里的 js 文件，害

[liuchengfeng1]

server/api.js 的意思就是把自己的项目做成一个接口是吧...别人可以调自己的方法

[PqgpNgA0wk]

@liuchengfeng1 有点这个意思, 我一开始想着依照之前的静态站的写法要封装请求方法, 统一管理 api 接口

[xppgg]

@PqgpNgA0wk 打扰一下 请教一个问题 遇到过 nuxt3 fetch failed 的问题吗

[PqgpNgA0wk]

@xppgg 有什么报错信息吗

[xppgg]

@PqgpNgA0wk 已经解决了 感谢回复

[seekafter]

如果一个外部的 api 接口,是放在 server 里面还是直接 vue 文件里用$fetch 发送

[PqgpNgA0wk]

@seekafter 取决于你的业务，放 server 目录下等于自己再套了一层，可以扩展的变量就多了

[seekafter]

@PqgpNgA0wk 请问在 server 目录下的接口怎么互相调用呢?用 userFetch 吗? 我怎么有时候能成功,有时候不行呢

[PqgpNgA0wk]

@seekafter server 端直接 fetch / $fetch 就可以

[crocoBaby]

我觉得全部通过 serve 包好一点,统一处理

[PqgpNgA0wk]

@crocoBaby 看项目吧，再 server 里包一层太耗心智了😂，目前的项目除了全栈的都直接前端调目标接口