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的情况下，找到了两个解决方案：

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

这种写法的问题是在拦截器“onResponse”中，没办法使用 Nuxt 提供的“useCookie”方法，也就没办法实现在response时最常见的存token的功能了
通过“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/xxxlet _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/xxxlet _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}
}