Nuxt4渲染数据的一个小问题？

Question

一个nuxt4项目，很简单拿到数据在页面上显示title,数据拿到了，可页面过几秒就提示

<script setup lang="ts">
import {articleByIdApi} from "@/api/index";
const route=useRoute()
const article=ref()
const getData=async(id:any)=>{
  const res=await articleByIdApi(id)
  article.value=res?.data
}
getData(route.params.id)
</script>

<template>
  <div>
    <div class="flex justify-center font-bold">{{article.title}}</div>
  </div>
<div>内容id为：{{route.params.id}}</div>
 {{article}}
</template>

<style scoped>

</style>

下面是封装的请求：

type Methods = "GET" | "POST" | "DELETE" | "PUT";

const BASE_URL = "http://localhost:8080/";

export interface IResultData<T> {
  code: number;
  data: T;
  msg: string;
}

class HttpRequest {
  request<T = any>(
    url: string,
    method: Methods,
    data: any,
    options?: any,
  ) {
    return new Promise((resolve, reject) => {
      const newOptions: any= {
        baseURL: BASE_URL,
        method: method,
        ...options,
      };

      if (method === "GET" || method === "DELETE") {
        newOptions.params = data;
      }
      if (method === "POST" || method === "PUT") {
        newOptions.body = data;
      }
      console.log("请求地址")
      console.log(BASE_URL+url)
      console.log(newOptions)
      useFetch(url, newOptions)
        .then((res) => {
          //全局响应拦截，判断响应码等处理
          console.log("响应")
          console.log(res);
          if(res.error.value){
            reject(res.error.value);
             return;
          }
          const result:IResultData<T>=res.data.value as IResultData<T>;
          console.log("请求结果")
          console.log(result);
          if(result.code===200){
            resolve(result);
          }else if(result.code===500){
            ElMessage.error(result.msg||'请求失败');
            reject(new Error(result.msg||'请求失败'));
          }else if(result.code===401){
            ElMessage.error(result.msg||'请求失败');
            reject(new Error(result.msg||'请求失败'));
          }else{
            //处理期其它状态码
            reject(new Error(result.msg||'请求失败'));
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // 封装常用方法

  get<T = any>(url: string, params?: any, options?:any) {
    return this.request(url, "GET", params, options);
  }

  post<T = any>(url: string, data: any, options?: any) {
    return this.request(url, "POST", data, options);
  }

  Put<T = any>(url: string, data: any, options?: any) {
    return this.request(url, "PUT", data, options);
  }

  Delete<T = any>(url: string, params: any, options?: any) {
    return this.request(url, "DELETE", params, options);
  }
}

const httpRequest = new HttpRequest();

export default httpRequest;

Answer 1

在模板中直接访问了 article.title，而 article 是一个 ref，初始值是 undefined，在数据还没加载完成时访问 article.title 会导致错误。

你写的是：

<div class="flex justify-center font-bold">{{article.title}}</div>

但 article 是这样定义的：

const article = ref()

初始值是 undefined，所以在模板渲染时 article.title 会报错。

可以使用条件渲染解决

<template>
  <div v-if="article.value">
    <div class="flex justify-center font-bold">{{article.value.title}}</div>
    <div>内容id为：{{route.params.id}}</div>
    {{article}}
  </div>
  <div v-else>
    加载中...
  </div>
</template>