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

最新推荐文章于 2024-08-28 16:37:37 发布

中规中矩的�boy

最新推荐文章于 2024-08-28 16:37:37 发布

阅读量6.8k

点赞数 1

文章标签： vue node.js javascript

本文链接：https://blog.csdn.net/lxRime/article/details/131735810

版权

前言

useFetch 可组合函数提供了一个方便的包装器，用于useAsyncData和$fetch。它会自动生成基于URL和fetch选项的键，根据服务器路由提供请求URL的类型提示，并推断API响应类型。

useFetch，应该直接在设置函数、插件或路由中间件中调用。它返回响应式的可组合函数，并处理将响应添加到Nuxt负载中，以便在页面水合期间从服务器传递给客户端而无需重新获取数据。

注意：所有fetch选项都可以使用computed或ref值进行赋值。如果这些值更新，将自动进行新的请求。

以下请求封装脱离了自动请求!!!

第一步更改配置

1.配置环境变量

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