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

• 前言

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

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

/*** @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 timestampconst timestamp = new Date().getTime();// Generate an AES Keyconst aesKey = Base64.encode("jupai" + timestamp);// Service parameter aes encryption// console.log(_data, "_data");let reqContent = encodeURIComponent(Encrypt(JSON.stringify(_data), aesKey));// md5 signatureconst md5Sign = md5(reqContent).toUpperCase();// UrlDecode Decrypts the public keyconst 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

export const getList= (params: ReqLotList) => {return postApi<ResLotList[]>("/api/getList", params);
};

• index.vue

const list= await getList({pageNum: 1,pageSize: 8
});