nuxt3 服务端请求其他接口犯的问题与解决

目的

老项目迁移到 nuxt3，为了减少代码修改量，打算封装一个在服务端运行的请求函数，用于在服务端渲染页面的同时，将接口数据请求回来一起返回给客户端

在服务端请求接口并渲染到页面上、在客户端不请求该接口，但需要能够拿到存储的值

用到的 API

• useAsyncData/useFetch

• useState

犯的问题

useAsyncData和useFetch返回的response数据都是被Proxy代理的数据，当时为了老项目中能少改点东西，用 toRaw 去掉了代理

export async function serverRequest(url,data) {
    ...
    const options = {
        ...obj,
        onRequest({ request, options }) {...},
        onResponse({ request, response, options }) {...},
    };
    const res = await useFetch( url, {...options, ...config})
    if (res.status.value === "error") {
        return toRaw(Promise.reject(res.error?.value));
    } else {
        return toRaw(res.data); // 核心错误就是加了个toRaw
    }
}

解释

useAsyncData/useFetch返回的代理数据，是类似useState生成的SSR 友好组合代理，会根据内部的key来校验是否需要重复请求的，删掉了就很容易出现重复请求的结果

解决过程

一

在使用toRaw的情况下，找到了两个解决方案：

1. 在 vue 钩子“onServerPrefetch”中执行该方法，就只在服务端运行了

   这种写法的问题是在拦截器“onResponse”中，没办法使用 Nuxt 提供的“useCookie”方法，也就没办法实现在response时最常见的存token的功能了

2. 通过“useState”创建，在回调中执行请求函数，利用useState的特性，接口就只会在服务端请求了

   这个方法的问题是在同一页面写多个请求，会报莫名其妙的错误，也有第一种方法中的拦截器问题

上边两个案总结：因为没有看源码，也没有深入了解 Nuxt 的运行模式，从表面上来感觉，nuxt 服务端运行似乎并没有刻意等待请求完全结束再返回给客户端，所以才会有各种各样的问题

二

最后在查资料的过程中找到了启发，删掉了toRaw，实现了个人认为较为“合理”的写法：

const config = {
  server: true,
  ...
}

export function serverRequest(url,data) {
    ...
    const options = {
        ...obj,
        onRequest({ request, options }) {...},
        onResponse({ request, response, options }) {...},
    };
    return useFetch( url, {...options, ...config})
}

<script setup>
  const { data: bannerList } = await serverRequest('basic/banner/list')
 </script>

不带toRaw后，很轻松就解决了一直困扰我的问题

useFetch会根据url和fetch选项自动生成一个key，判断接口是否需要请求

三

将上边方法放入我的项目后，发现useFetch请求的数据还是会在服务端和客户端都请求一次，排查后发现，是因为在项目中，我在请求前做了url的处理导致的

• 客户端请求数据，通过nitro进行代理转发，实现接口请求

• 服务端请求数据，需要直接请求域名

根据这个需求，我在请求前增加了对接口地址的处理

...
export function serverRequest(url,data) {
    ...
    // url = /api/xxx/xxx
    let _url = getUrl() // /api/xxx/xxx => http://aaa.com/xxx/xxx
    ...
    const options = {
        ...obj,
        onRequest({ request, options }) {...},
        onResponse({ request, response, options }) {...},
    };
    return useFetch( url, {...options, ...config})
}

因为对“url”进行了修改，导致useFetch在服务端和客户端自动生成的key不同，所以还会导致多次请求的问题

解决办法：使用useAsyncData代替useFetch，自定义key值以达到控制请求的效果

...
export function serverRequest(url,data) {
    ...
    let name = obj.url + JSON.stringify(data);
    // url = /api/xxx/xxx
    let _url = getUrl() // /api/xxx/xxx => http://aaa.com/xxx/xxx
    ...
    const options = {
        ...obj,
        onRequest({ request, options }) {...},
        onResponse({ request, response, options }) {...},
    };
    // 发起请求
    // return useFetch( url, {...options, ...config}) 改为 return useAsyncData(name, () => $fetch(url, options), config);
    // 错误处理
    let { data, error, status } useAsyncData(name, () => $fetch(url, options), config);
    if (error.value !== 'success') {
        ...
    } else {
        return data
    }
}

–end–