nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回

王小王和他的小伙伴

已于 2023-04-10 17:56:04 修改

阅读量6.6k

点赞数 2

分类专栏： nuxt3 文章标签： http javascript 前端

于 2023-04-10 17:06:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_55042716/article/details/130064468

版权

nuxt3 专栏收录该内容

7 篇文章

订阅专栏

文章讨论了在Nuxt3项目中封装接口请求时遇到的刷新页面数据不更新的问题。作者通过添加时间戳参数强制刷新数据，但导致F5刷新时无法获取数据。文中提到了利用nextTick尝试解决，以及在http.ts文件中自定义fetch方法进行错误处理和接口调用。最后，展示了如何在组件中使用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中封装接口请求，并且解决刷新页面useFetch无返回数据问题
刷新页面useFetch无返回数据问题：

浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求，
比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所以我给入参加了一个以时间戳为值的参数key，但是这样导致每次F5刷新页面的时候，都拿不到数据，导致页面没有显示。Suspense不起作用。

utils/https.ts

import { _AsyncData } from "nuxt3/dist/app/composables/asyncData";
import { ElMessage } from "element-plus";

const baseUrl = "";
// 指定后端返回的基本数据类型
export interface ResponseConfig {
  code: number;
  status: number;
  data: any;
  msg: string;
}
export interface ValueConfig {
  value: any;
}

const fetch = async (url: string, options?: any): Promise<any> => {
  await nextTick(); //解决刷新页面useFetch无返回
  const reqUrl = baseUrl + url;
  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options })
      .then(({ data, error }: _AsyncData) => {
        if (error.value) {
          reject(error.value);
          return;
        }
        const value = data.value;
        if (!value) {
          console.log("执行错误了");
          // 这里处理错误回调
          // reject(value)
          // $router.replace('/reject/' + value.status)
        } else if (value.code === 102) {
          ElMessage({
            message: value.msg,
            type: "error",
          });
        } else {
          resolve(ref(value));
        }
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};

export default new (class Http {
  get(url: string, params?: any): Promise<any> {
    return fetch(url, { method: "get", params });
  }

  post(url: string, params?: any): Promise<any> {
    return fetch(url, { method: "post", params });
  }

  put(url: string, body?: any): Promise<any> {
    return fetch(url, { method: "put", body });
  }

  delete(url: string, body?: any): Promise<any> {
    return fetch(url, { method: "delete", body });
  }
})();

使用方法：composables/index.ts，api接口放在这个里面会自动导入函数

import Http from "@/utils/http";

/**
 * 测试接口
 */
export const getTags = () => {
  return Http.get("https://api/apiWx/wechat-config");
};

在页面或者组件中使用：

onMounted(() => {
   getTags()
     .then((res) => {
       console.log(res.value.data, "res");
     })
     .catch((err) => {
      console.log(err, "错误");
   });
});