Nuxt3封裝useFetch請求并防止參數(shù)自動更新請求方式

更新時間：2026年03月27日 10:12:31 作者：中規(guī)中矩的boy

這篇文章主要介紹了Nuxt3封裝useFetch請求并防止參數(shù)自動更新請求方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

useFetch 可組合函數(shù)提供了一個方便的包裝器，用于useAsyncData和$fetch。

它會自動生成基于URL和fetch選項的鍵，根據(jù)服務器路由提供請求URL的類型提示，并推斷API響應類型。

useFetch，應該直接在設置函數(shù)、插件或路由中間件中調(diào)用。它返回響應式的可組合函數(shù)，并處理將響應添加到Nuxt負載中，以便在頁面水合期間從服務器傳遞給客戶端而無需重新獲取數(shù)據(jù)。

注意：所有fetch選項都可以使用computed或ref值進行賦值。如果這些值更新，將自動進行新的請求。

以下請求封裝脫離了自動請求!!!

第一步更改配置

1.配置環(huán)境變量

//.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

2.修改package.json配置

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

3.修改nuxt.config.ts配置

//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,
     }
   }
 }

第二步請求封裝

1.在composables目錄下新建MyRequest.ts

_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 });
  },
};

2.API封裝

_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>
}