如何设置Nuxt 3中useFetch中使用的全局API baseUrl

Question

如何全局设置 useFetch 可组合项中使用的 baseUrl（可能是 nuxt.config.ts）？

如何避免在每次 useFetch 中定义它？

Answer 1

你可以像这样定义baseURL你的nuxt.config.js|ts：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

（或使用固定值或仅环境变量 - 根据您的喜好）

并添加这个可组合项：

// /composables/useMyFetch.js

export const useMyFetch = (request, opts) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

如果你想要类型安全，你可以这样实现：

// /composables/useMyFetch.ts

export const useMyFetch: typeof useFetch = (request, opts?) => {
  const config = useRuntimeConfig()

  return useFetch(request, { baseURL: config.public.baseURL, ...opts })
}

然后您可以用作- 但设置了 baseURL 的useMyFetch替代品:-)useFetch

Answer 2

可以设置以下可组合项
/composables/useJsonP.ts

export const useJsonP = async (path) => {
  return await useFetch(() => `https://jsonplaceholder.typicode.com/${path}`)
}

在你看来你可以称之为

<script setup>
const jsonP = await useJsonP('todos/1')
</script>

<template>
  <div>
    <pre>{{ jsonP.data }}</pre>
  </div>
</template>

这样，无需在某处定义它并以某种方式破解配置。您确实有一种简单的方法来定义可重用的代码片段，借助 Nuxt 的 DX，这些代码片段可以直接导入到您的组件/视图中。

Answer 3

如果您想在 Typescript 中执行此操作，您可以从中推断出参数，useFetch这样如果 Nuxt 内部发生变化，您就不必更新代码。

使您的基本 URL 可在您的环境中进行配置

正如其他人提到的，首先在运行时配置的公共部分设置基本 URL ：

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || 'https://api.example.com/',
    },
  },
  // ...

使用您自己的可组合项包装 useFetch

的定义useFetch使用了许多类型变量，是重载的，并且选项参数的有效内容实际上根据传递给它的请求/结果类型而变化。这使得正确重新输入变得非常困难。

更糟糕的是，即使我们正确地重新输入它，如果定义发生变化，我们的包装器也将不再正确。幸运的是，有一个非常简单的解决方案。借用类型useFetch并重用它：

// composables/useAPIFetch.ts

import { useFetch } from "#app"

type useFetchType = typeof useFetch

// wrap useFetch with configuration needed to talk to our API
export const useAPIFetch: useFetchType = (path, options = {}) => {
  const config = useRuntimeConfig()

  // modify options as needed
  options.baseURL = config.public.baseUrl
  return useFetch(path, options)
}

请注意，我们明确不需要重新useFetch声明任何类型变量、参数参数类型或返回类型，因为我们从的类型借用所有这些类型。

使用新的可组合项

在您的页面/组件中使用它，您的类型将正确流动：

// components/Foo.vue

const { data, error, pending } = await useAPIFetch<ResultsType>("/my-path", { 
  method: "POST",
  body: data,
  ...
})

Answer 4

您还可以像这样涉及.env

在.env中

NUXT_PUBLIC_BASE_URL = https://www.someapi.com

在nuxt.config.js/ts中

runtimeConfig: {
 
    public: {
      BASE_URL: 'some fallback value',
    },
  },

正如文档中所说，BASE_URL将NUXT_PUBLIC_BASE_URL自动替换为

（无需使用process.env.NUXT_PUBLIC_BASE_URL）

在可组合项中你可以使用

const config = useRuntimeConfig();

console.log('base url is' , config.baseUrl)