网站建设 重庆,国家建设部官方网站投诉,外贸网站seo怎么做,酒吧网站模板前言 如果使用nuxt3写项目#xff0c;可以查看nuxt3实战#xff1a;完整的 nuxt3 vue3 项目创建与useFetch请求封装#xff0c;此篇内容有详细步骤 但在此篇内容中useFetch请求在页面有多个请求的情况下#xff0c;或者放在客户端渲染情境下是失败的#xff0c;所以在此篇…前言 如果使用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: UseFetchOptionsT
) {const runtimeConfig useRuntimeConfig();const token useCookiestring | undefined(token);const defaultOptions: UseFetchOptionsT {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 useFetchResultDataT(url, {...defaultOptions,..._object,} as any);
};export const getApi async T(url: NitroFetchRequest,reqParams: object {},_object: UseFetchOptionsT {}
) {const { data } await apiRequestT(url, reqParams, {method: get,..._object,});return data;
};export const postApi async T(url: NitroFetchRequest,reqParams: object {},_object: UseFetchOptionsT {}
) {const { data } await apiRequestT(url, reqParams, {method: POST,..._object,});return data;
};
使用/api/modules/index
export const getList (params: ReqLotList) {return postApiResLotList[](/api/getList, params);
};index.vue
const list await getList({pageNum: 1,pageSize: 8
});
