如何在Nuxt3中为$fetch配置全局onRequest处理器添加请求数据

可以在Nuxt3中实现类似Nuxt2 Axios的全局请求拦截逻辑，为每个$fetch请求自动添加特定数据。Nuxt3的$fetch基于ofetch实现，我们可以通过Nuxt插件来添加全局请求拦截器：

实现步骤 #

1. 在项目的plugins目录下创建一个新的插件文件，比如plugins/fetch.global.js（文件名中的.global确保插件在所有场景下都被加载）

2. 在插件中添加如下代码：

export default defineNuxtPlugin(nuxtApp => {
  // 获取全局的$fetch实例
  const { $fetch } = nuxtApp

  // 添加请求拦截器
  $fetch.onRequest(({ options }) => {
    // 为请求体添加特定字段，逻辑与Axios示例一致
    if (options.body) {
      options.body.test = '123'
    } else {
      options.body = { test: '123' }
    }
  })
})

说明 #

• 这个拦截器会作用于所有通过$fetch发起的请求，包括页面组件中的useFetch、useAsyncData内部调用的请求，以及直接调用$fetch的请求。
• 与Axios的config.data对应，ofetch中请求体对应的是options.body，逻辑处理方式基本一致。
• 如果需要结合状态管理（比如Pinia），可以在插件中通过useStore()获取Store实例，添加更多自定义逻辑。

内容的提问来源于stack exchange，提问作者Twist