nuxt3中使用useFetch请求刷新不返回数据或返回html结构问题解决-完整nuxt3useFetchtch请求封装

  • 前言

如果使用nuxt3写项目,可以查看nuxt3实战:完整的 nuxt3 + vue3 项目创建与useFetch请求封装,此篇内容有详细步骤

但在此篇内容中useFetch请求在页面有多个请求的情况下,或者放在客户端渲染情境下是失败的,所以在此篇更新下useFetch的请求封装方法:

ts 复制代码
/**
 * @description  useFetch
 * */
import type { NitroFetchRequest } from "nitropack";
import type { UseFetchOptions } from "#app";
import type { ResultData } from "~/api/interface";
import { Base64 } from "js-base64";
import { rsaEncrypt } from "~/utils/ras";
import { Encrypt } from "~/utils/aes";
import { md5 } from "js-md5";

const apiRequest = <T>(
  url: NitroFetchRequest,
  reqParams: object = {},
  _object: UseFetchOptions<T>
) => {
  const runtimeConfig = useRuntimeConfig();
  const token = useCookie<string | undefined>("token");

  const defaultOptions: UseFetchOptions<T> = {
    baseURL: runtimeConfig.public.baseAPI,

    onRequest({ options }) {
      let _data: {
        [prop: string]: any;
      } = {
        ...reqParams,
      };

      if (token.value) {
        _data["userUuid"] = token.value;
      }
      // Gets the current timestamp
      const timestamp = new Date().getTime();
      // Generate an AES Key
      const aesKey = Base64.encode("jupai" + timestamp);
      // Service parameter aes encryption
      // console.log(_data, "_data");

      let reqContent = encodeURIComponent(
        Encrypt(JSON.stringify(_data), aesKey)
      );
      // md5 signature
      const md5Sign = md5(reqContent).toUpperCase();
      // UrlDecode Decrypts the public key
      const rsaSign = encodeURIComponent(rsaEncrypt(aesKey));
      const params = {
        version: "1.0.0",
        osType: "1",
        reqContent: reqContent,
        md5Sign: md5Sign,
        rsaSign: rsaSign,
        timeStamp: timestamp,
        gps: "gps",
        _data,
      };

      options.headers = {
        ...(token.value && { "X-Access-Token": token.value }),
        ...(_object.headers || {}),
        ...options.headers,
      } as { [key: string]: string };
      options.body = JSON.stringify(params);
    },

    onResponse({ response }) {
      if (response._data.code !== "200" && response._data.code !== "12010") {
        if (import.meta.client) {
          message.error(response._data.message);
        }
      }
    },

    onResponseError({ response }) {
      if (import.meta.client) {
        message.error(response._data.message);
      }
    },
  };

  return useFetch<ResultData<T>>(url, {
    ...defaultOptions,
    ..._object,
  } as any);
};

export const getApi = async <T>(
  url: NitroFetchRequest,
  reqParams: object = {},
  _object: UseFetchOptions<T> = {}
) => {
  const { data } = await apiRequest<T>(url, reqParams, {
    method: "get",
    ..._object,
  });
  return data;
};

export const postApi = async <T>(
  url: NitroFetchRequest,
  reqParams: object = {},
  _object: UseFetchOptions<T> = {}
) => {
  const { data } = await apiRequest<T>(url, reqParams, {
    method: "POST",
    ..._object,
  });
  return data;
};
  • 使用:
  • /api/modules/index
ts 复制代码
export const getList= (params: ReqLotList) => {
  return postApi<ResLotList[]>("/api/getList", params);
};
  • index.vue
ts 复制代码
const list= await getList({
  pageNum: 1,
  pageSize: 8
});
相关推荐
摇滚侠3 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin4 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
知识分享小能手4 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手10 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
赵得C14 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
叫我阿柒啊15 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
@八度余温17 小时前
eslint 和 prettier 的相同点和区别
vue·eslint
周航宇JoeZhou19 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
计算机学长felix21 小时前
基于Django的“酒店推荐系统”设计与开发(源码+数据库+文档+PPT)
数据库·python·mysql·django·vue