Nuxt 3：如何向 $fetch 添加默认参数和标头

Question

尝试将任何默认参数或标头（在本例中为 json Web 令牌作为身份验证标头）添加到 $fetch 可组合项，这样我就不必这样做

await $fetch('/api/example', {
  headers: {
    // authentication header and jwt here
  }
});

对每一个请求。我找到了一种方法，通过将 $fetch 包装在另一个可组合项中（在本例中为 $api）来实现此目的，但这删除了 ​​api 响应上的任何类型，因此这不是我想要做的事情。

即使是像这样的简化 api.ts 可组合项

export const $api = (url: string) => {
  return $fetch(url);
}

不会给我前端空白 $fetch 会给我的 api 结果的响应类型。

我可以以某种方式在 $fetch 中注入默认值吗？也许通过模块/插件/拦截器？如果没有，有没有办法将 $fetch 包装在可组合项中并仍然保留响应类型？

我正在使用 nuxt3，$fetch 是 ohmyfetch 并且我没有使用 @nuxt/auth 包顺便说一句

Answer 1

Nuxt 3正在使用ofetch，它通过globalThis全局公开（请参见此处）。如果您想使用预配置的 ofetch 实例$fetch（例如，使用标头或自动添加的查询参数），您可以覆盖globalThis.$fetch您<script>的app.vue使用ofetch.create并提供默认选项（如ofetch 文档的本节中所述）。您可以在此处和此处ofetch.create找到可以在ofetch 代码中传递的所有可用选项。

示例代码

应用程序.vue

<script setup>
import { ofetch } from 'ofetch'

globalThis.$fetch = ofetch.create({ baseUrl: '', onRequest: () => {}, ... })
</script>