vue.js - Vue3 SSR onServerPrefetch 调用接口获取数据报错?

Question

大佬们帮忙看一个问题，关于Vue3 SSR onServerPrefetch生命周期的
我是想在该生命周期里调用接口获取数据然后直接在HTML里渲染，结果报错了

<script setup>import { onMounted, onServerPrefetch, ref } from 'vue'import dayjs from 'dayjs'import { getDetail } from '../services/index'const detailData = ref(null)onServerPrefetch(async () => {  let res = await getDetail()  detailData.value = {    ...res.data,    bgsjShow: dayjs(res.data.bgsj).format('YYYY年MM月DD日')  }})onMounted(async () => {  if (!detailData.value) {    let res = await getDetail()    detailData.value = {      ...res.data,      bgsjShow: dayjs(res.data.bgsj).format('YYYY年MM月DD日')    }  }})</script><template>  <section id="page1">    <div class="banner">      <p>名称：{{ detailData.qymc }}</p>      <p>时间：{{ detailData.bgsj }}</p>    </div>  </section></template>

这是报错信息！！！

PS C:\Users\a1561\Desktop\aisino\demo\ssr\basic-vue> yarn serve:ssryarn run v1.22.21$ node server/index.js --ssrfile:///C:/Users/a1561/Desktop/aisino/demo/ssr/basic-vue/server/index.jsC:\Users\a1561\Desktop\aisino\demo\ssr\basic-vue\serverstart server: localhost:5173[Vue warn]: Unhandled error during execution of serverPrefetch hook   at <IndexView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >node:internal/process/promises:288            triggerUncaughtException(err, true /* fromPromise */);            ^[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "connect ECONNREFUSED ::1:80".] {  code: 'ERR_UNHANDLED_REJECTION'}Node.js v18.19.1error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我查看了Vue文档SSR的章节https://cn.vuejs.org/guide/scaling-up/ssr.html#component-life...，并没有找到问题所在，甚至连示例都一致。

Answer 1

提示很明显了，你把这个调用用try catch 包起来，大概率这个接口在服务端请求时报错了

try{    onServerPrefetch(async () => {  let res = await getDetail()  detailData.value = {    ...res.data,    bgsjShow: dayjs(res.data.bgsj).format('YYYY年MM月DD日')  }})}catch(e){    console.log(e);}

Answer 2

根据你提供的错误信息，报错信息中的关键部分是：

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "connect ECONNREFUSED ::1:80".]

这个错误表明，你在onServerPrefetch中调用的getDetail函数返回了一个被拒绝的Promise，而这个Promise没有被正确处理。ECONNREFUSED ::1:80这个错误通常意味着你的应用试图连接到本地主机的80端口，但是连接被拒绝了。这可能是因为你的服务器没有在预期的端口上运行，或者由于防火墙或安全组设置而阻止了连接。

为了解决这个问题，你可以尝试以下几个步骤：

1. 检查服务器是否正在运行：确保你的服务器正在运行，并且正在监听你试图连接的端口。你可以使用netstat或类似的工具来检查哪些端口正在被使用。
2. 检查getDetail函数：getDetail函数可能返回了一个被拒绝的Promise。你需要确保这个函数正确处理了所有可能的错误情况，包括网络连接失败、服务器无响应等。如果这个函数是从某个库或API调用的，你可能需要查阅该库或API的文档，看看如何处理可能的错误。
3. 添加错误处理：在onServerPrefetch中调用getDetail时，你应该添加一个.catch块来处理任何可能的错误。这样，即使getDetail返回一个被拒绝的Promise，你的应用也不会崩溃。例如：

onServerPrefetch(async () => {  try {    let res = await getDetail()    detailData.value = {      ...res.data,      bgsjShow: dayjs(res.data.bgsj).format('YYYY年MM月DD日')    }  } catch (error) {    console.error('Failed to fetch data during server prefetch:', error)    // 你可以选择设置一个默认的值给 detailData，或者抛出一个错误，取决于你的应用需求  }})

希望这些建议能帮助你解决问题。如果问题仍然存在，或者你有更多的代码和错误信息可以提供，我会很乐意进一步帮助你。