nuxt3中如何进行网络api接口请求

nuxt3中如何进行网络api接口请求

nuxt3项目中需要调用springboot提供的服务接口。虽然nuxt3本身就支持提供接口服务，
但毕竟这个框架主要擅长的是ssr。一些复杂的业务后台逻辑还是用成熟的springboot去做会好些。

nuxt3中使用网络请求的方法变成了内置的api。在之前版本nuxtjs中都是使用第三方式插件库(axios)。新版本里官网明确指出更推荐使用内置的方法来进行网络接口的请求。

先看下框架内置的网络请求的方式

.useFetch

<!-- 示例: -->

<script setup>
const { data: count } = await useFetch('/api/count')
</script>

<template>
  Page visits: {{ count }}
</template>

官网说这个接口是对 useAsyncData与$fetch的一层封闭。
这样似乎调用机制和useAsynData是一致的，但其实笔者用的时候发现还是有点区别的

useAsyncData 在server端会执行，但在client端会wait，并且上面代码中的data数据和server端请求的一致。 直到下一次跳转到此页面中才会执行。

而useFetch 在client端不会wait,而是直接返回一个空数据即 代码中的data为空
这就导致页面首次要展示的内容在server和client端不一致，就会产生Hydration Mismatch 的错误。等hydration(客户端激活)完后，才
返回请求的数据。

也不知道是nuxt3的bug，还是本身就是这样的机制。

方法参数和返回的数据具体介绍可以去官网查看

.$fetch
这个方法就是一个纯粹的网络接口请求的方式。也是官网推荐的代替使用axios的方法。

<!-- 示例 -->
<script>
export default defineNuxtComponent({
  fetchKey: 'hello',
  async asyncData () {
    return {
      hello: await $fetch('/api/hello')
    }
  }
})
</script>

开发环境配置网络代理

官网文档里虽然没有明确说明接口访问代理如何配置。但提供了配置nitro的入口。
由于nuxt3内置使用的是nitro服务器，所以配置代理的话需要查看nitro的官网文档

假如你的springboot服务器地址是 http://127.0.0.1:9090/ 则可以在nuxt.config.ts中添加如何配置即可。

nitro: {
        devProxy: {
            "/api": {
                target: 'http://127.0.0.1:9090/',
                prependPath: true,
                changeOrigin: true,
            }

        }
    }

这样在本地开发调试的时候，就可以在浏览器上成功访问springboot的接口。
但奇怪的时，server 端的接口请求没有走这个代理。所以不得不使用原始的接口地址。
考虑到代码复用，所以就写了工具方法

// utils.js
export default {
    getBaseUrl() {
        if (process.server) {
            return "http://127.0.0.1:9090/"
        } else {
            return "/api/"
        }
    }
}

使用的示例:

<script setup>
const { data: count } = await $fetch('/api/count', {
    baseURL: myutils.getBaseUrl()
})
</script>

这样在server和client都可以调用同一个接口了。

生产环境部署时的nginx配置。

在部署的时候，在服务器内网启动nuxt3服务和springboot服务后，
然后用nginx配置从外网访问。
配置如下:

server {
    listen 80;
    if ($host != 'xxxx') {
        return 403;
    }
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location /api {
        proxy_pass http://localhost:9090/;
    }
    location / {
        proxy_pass http://localhost:3000/;
    }

    error_page 404 /404.html;
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    
}

这样就可以在外网正常访问了。

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中如何进行网络api接口请求