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
});
相关推荐
软件2058 小时前
【vue3主题切换】
vue
结衣结衣.14 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
xaboy3 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D3 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK3 天前
vue 不完美的多标签页解决方案
vue
goms3 天前
前端项目集成lint-staged
前端·vue·lint-staged
梁辰兴4 天前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
ChongYu重玉4 天前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
csj504 天前
前端基础之《Vue(22)—安装MongoDB》
前端·vue