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

2024-01-07 18:48:39

目的

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

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

用到的 API

犯的问题

useAsyncDatauseFetch返回的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会根据urlfetch选项自动生成一个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–

文章来源:https://blog.csdn.net/block_xu/article/details/135379807
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。