vue.js - 在 nuxt 3 中使用 ofetch 设置全局 header

Question

目标是为所有传出查询设置全局 header

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

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

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

})

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

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 附加到该监听器？或者也许还有另一种使用中间件或某物的最佳实践？

Answer 1

如果您想要全局 ofetch，那么您可以创建一个插件，根据您的喜好注入(inject) ofetch 设置的实例。本质上与您正在做的事情类似。

最终，您将拥有一个看起来像这样的插件

export default defineNuxtPlugin((nuxtApp) => {
  const instance = ofetch.create({
    baseURL: '/api',
    headers: {
      Accept: 'application/json'
    }
  })

  // You can also just do this instead of returning
  // nuxtApp.provide('ofetch', instance)

  return {
    provide: {
      ofetch: instance
    }
  }
})

并像这样使用它

// Take note that whatever key you provide,
// it'll be prepended with `$` when injecting it
const { $ofetch } = useNuxtApp()

Ofetch 文档:https://github.com/unjs/ofetch#%EF%B8%8F-create-fetch-with-default-options

Nuxt插件文档:https://nuxt.com/docs/guide/directory-structure/plugins#automatically-providing-helpers

Nuxt提供文档:https://nuxt.com/docs/api/composables/use-nuxt-app#provide-name-value

自动完成/ typescript 指南也包含在 Nuxt 的文档中。

---

ofetch 没有全局监听器。您可能需要使用 axios 来代替，您可以在全局“实例”中添加默认选项。

我认为最好的做法是记录它并让人们了解它，或者制作一个“sdk”或 api 库来抽象对后端的请求，例如:

// users.ts
export default {
  getAll() {

  },

  getById(id) {
  },

  create() {
  }
}

在这种情况下，您仍然会告诉人们使用它，而不是自己手动执行请求，例如:

users.getAll()
users.getById(id)

而不是

axios.get('/users')
axios.get(`/users/${id})