0


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

项目中封装接口请求,并且解决刷新页面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;returnnewPromise((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)}elseif(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>{returnfetch(url,{ method:"get", params });}post(url: string, params?: any): Promise<any>{returnfetch(url,{ method:"post", params });}put(url: string, body?: any): Promise<any>{returnfetch(url,{ method:"put", body });}delete(url: string, body?: any): Promise<any>{returnfetch(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,"错误");});});
标签: http javascript 前端

本文转载自: https://blog.csdn.net/weixin_55042716/article/details/130064468
版权归原作者 王小王和他的小伙伴 所有, 如有侵权,请联系我们删除。

“nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回”的评论:

还没有评论