Nuxt3封装useFetch请求并防止参数自动更新请求方式

//.env.development
NUXT_PUBLIC_API_BASE=http://localhost:8099/v1/api

//.env.production
NUXT_PUBLIC_API_BASE=http://110.110.110.110:8099/v1/api

//package.json
"dev": "nuxt dev --dotenv .env.development",
"build": "nuxt build --dotenv .env.production",

//nuxt.config.ts
 // 添加运行时配置
runtimeConfig: {
   apiSecret: process.env.NUXT_API_SECRET,
   public: {
     apiBase: process.env.NUXT_PUBLIC_API_BASE || SERVER_BASE_API,
   }
}
---------------------------------------------------------------------
// 如果存在跨域
nitro: {
   devProxy: {
     '/api': {
       target: process.env.NUXT_PUBLIC_API_BASE,
       changeOrigin: true,
     }
   }
 }

_nuxt/composables/MyRequest.ts

//MyRequest.ts
import { ElMessage } from 'element-plus';

type UrlType = string | Request | Ref<string | Request> | (() => string | Request);

export interface RequestOptions {
  method?: any;
  params?: any;
}

const request = async (url: UrlType, params: any, options: RequestOptions) => {
  const headers = useRequestHeaders(['cookie']);
  const { apiBase: baseURL } = useRuntimeConfig().public;
  const { method = ((options?.method || 'GET') as string).toUpperCase() } = options;
  return await useFetch(url as string, {
    default: () => [],
    baseURL,
    method,
    params:{...params},//temp hook
    headers,
    // lazy: true,
    credentials: 'include',
    body: method === 'POST' ? JSON.stringify(params) : undefined,
    onRequest({ request, options }) {
      // Set the request headers
      //   options.headers = options.headers || {};
    },
    onRequestError({ request, options, error }) {
      ElMessage.closeAll()
      error && ElMessage.error('Sorry, The Data Request Failed');
      // Handle the request errors
    },
    onResponse({ request, response, options }) {
      // Process the response data
      return response._data;
    },
    onResponseError({ request, response, options }) {
      console.log('🚀 ~ file: MyRequest.ts:42 ~ onResponseError ~ request:', request);
      // Handle the response errors
    },
  });
};

export const useDefaultRequest = {
  get: (url: UrlType, params?: any, option?: RequestOptions) => {
    return request(url, params, { method: 'GET', ...option });
  },
  post: (url: UrlType, params?: any, option?: RequestOptions) => {
    return request(url, params, { method: 'POST', ...option });
  },
};

_nuxt/composables/Api.ts

export const useApiProductList = (params: any): any => {
  return useDefaultRequest.get('/request', params);
};
export const useApiProductList = (params: any): any => {
  return useDefaultRequest.get('/request1', params);
};
export const useApiProductList = (params: any): any => {
  return useDefaultRequest.post('/request2', params);
};

const { data: response } = useApiSetContact(inquiryForm);

type UseFetchOptions = {
  key?: string
  method?: string
  query?: SearchParams
  params?: SearchParams
  body?: RequestInit['body'] | Record<string, any>
  headers?: Record<string, string> | [key: string, value: string][] | Headers
  baseURL?: string
  server?: boolean
  lazy?: boolean
  immediate?: boolean
  default?: () => DataT
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[]
}

type AsyncData<DataT, ErrorT> = {
  data: Ref<DataT | null>
  pending: Ref<boolean>
  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
  error: Ref<ErrorT | null>
}