V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PqgpNgA0wk
V2EX  ›  Nuxt.js

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

  •  
  •   PqgpNgA0wk · 2023-01-26 07:12:22 +08:00 · 3697 次点击
    这是一个创建于 665 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    15 条回复    2024-03-28 11:48:09 +08:00
    lyc575757
        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 转发一遍
    arnosolo
        2
    arnosolo  
       2023-01-26 09:33:24 +08:00 via iPhone
    你这个就是观念没转过来。ssr 是这样的,数据由渲染服务器请求(/server )后组装出一个有数据的 html 文件以后再发给前端。如果前端还要进一步修改数据,则讲相关逻辑写着 onMounted 里面。
    arnosolo
        3
    arnosolo  
       2023-01-26 09:39:24 +08:00 via iPhone
    https://fireship.io/lessons/nuxt-3-firebase/ 这篇文章虽然用的是 firebase 。但是有助于帮助你理解哪些请求就是渲染服务器发出的哪些请求是浏览器发出的。
    PqgpNgA0wk
        4
    PqgpNgA0wk  
    OP
       2023-01-27 16:27:44 +08:00
    @lyc575757
    @arnosolo
    感谢两位解答,又研究了一天,发现如果封装 ofetch 的话,服务端客户端都会请求一遍,可能是我写的不对,索性放弃封装了😅
    现在写了个脚本用 nunjucks 把后端接口文档导出的 json 生成为 /server/api 里的 js 文件,害
    liuchengfeng1
        5
    liuchengfeng1  
       2023-08-30 22:29:29 +08:00
    server/api.js 的意思就是把自己的项目做成一个接口是吧...别人可以调自己的方法
    PqgpNgA0wk
        6
    PqgpNgA0wk  
    OP
       2023-09-19 14:25:54 +08:00
    @liuchengfeng1 有点这个意思, 我一开始想着依照之前的静态站的写法要封装请求方法, 统一管理 api 接口
    xppgg
        7
    xppgg  
       307 天前 via iPhone
    @PqgpNgA0wk 打扰一下 请教一个问题 遇到过 nuxt3 fetch failed 的问题吗
    PqgpNgA0wk
        8
    PqgpNgA0wk  
    OP
       307 天前
    @xppgg 有什么报错信息吗
    xppgg
        9
    xppgg  
       302 天前
    @PqgpNgA0wk 已经解决了 感谢回复
    seekafter
        10
    seekafter  
       251 天前
    如果一个外部的 api 接口,是放在 server 里面还是直接 vue 文件里用$fetch 发送
    PqgpNgA0wk
        11
    PqgpNgA0wk  
    OP
       250 天前
    @seekafter 取决于你的业务,放 server 目录下等于自己再套了一层,可以扩展的变量就多了
    seekafter
        12
    seekafter  
       242 天前
    @PqgpNgA0wk 请问在 server 目录下的接口怎么互相调用呢?用 userFetch 吗? 我怎么有时候能成功,有时候不行呢
    PqgpNgA0wk
        13
    PqgpNgA0wk  
    OP
       239 天前
    @seekafter server 端直接 fetch / $fetch 就可以
    crocoBaby
        14
    crocoBaby  
       239 天前
    我觉得全部通过 serve 包好一点,统一处理
    PqgpNgA0wk
        15
    PqgpNgA0wk  
    OP
       238 天前
    @crocoBaby 看项目吧,再 server 里包一层太耗心智了😂,目前的项目除了全栈的都直接前端调目标接口
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5078 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 09:36 · PVG 17:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.