在 nuxt 3 中使用 ofetch 设置全局标头

Question

目标是为所有传出查询设置一个全局标头

由于现在建议不再在 nuxt 3 中使用 axios，所以我想切换到 Nuxt3 的 ofetch。正如我所读，实现此功能的 nuxt3 团队没有考虑实现一个选项来全局设置所有请求的标头等信息，就像我们在 axios 中可以做到的那样。这很不幸，因为拥有所有请求都使用的 api 数据是很常见的。

我目前的解决方法是创建一个可组合项来获取请求并对其进行修改。由于可以在 nuxt.config 的运行时配置部分公开存储在 process.env 中的 api 数据，如下所示：

export default defineNuxtConfig({
   
    runtimeConfig: {  public: {  apiKey: process.env.API_KEY, } },

})

我们可以使用 useRuntimeConfig() 在名为 useFoo.ts 的可组合项中访问它，并根据需要修改标头

const opts = {
  
  async onRequest({ request, options }:any) {
    
    const runtimeConfig = useRuntimeConfig()
    options.headers = { 'apiToken': runtimeConfig.apiKey};

  },
};

export const useFoo = () =>  $fetch.create(opts);

现在，在随机组件中，我只导入可组合项并将 §fetch 方法替换为我的自定义方法

const foo = useFoo();

foo("apiroute", {
    retry: 0,
  })
    .then((response: any) => {
      console.log(response.data);
    })
    .catch((error: any) => {
      console.log(error);
    });

这确实有效，但它仍然是每次调用而不是全局的，这是次优的，因为正如一些人已经指出的那样，我们必须向每个使用它的开发人员解释自定义函数。

例如，是否有一种方法可以为整个应用程序中随时进行的任何提取调用创建一个全局 ofetch“侦听器”，我们可以将 onRequest 附加到？或者也许还有另一种使用中间件或其他东西的最佳实践？