vue.js 使用全局onRequest处理程序在nuxt 3中重新定义$fetch

50few1ms 于 2023-02-16 发布在 Vue.js

关注(0)|答案(1)|浏览(483)

有没有可能使用全局onRequest处理程序来$fetch nuxt 3，为每个请求添加特定的数据？使用nuxt 2和axios，这很简单

/plugins/axios.js

export default function ({ $axios, store, req }) {
  $axios.onRequest((config) => {
    if (config.data) {
      config.data.test = '123';
    } else {
      config.data = { test: '123' };
    }
    return config;
  });
}

但是如何在Nuxt 3和$fetch上实现相同的目标呢？

vue.js

来源：https://stackoverflow.com/questions/75434573/redefine-fetch-in-nuxt3-with-global-onrequest-handler

1条答案

按热度按时间

g2ieeal71#

好的，Nuxt 3 $fetch文档说明：
Nuxt使用ofetch全局公开$fetch助手...
当我们跳到ofetch文档时，我们可以看到拦截器部分。这给了我们一些选项来做你试图实现的事情。我的建议是：
创建一个http可组合对象（或您想要的任何其他名称）：

// composables/use-http.js
const opts = {
  async onRequest({ request, options }) {
    // Add your specific data here
    options.query = { t: '1234' }
    options.headers = { 'Authorization': 'my_token' }
  }
}

export default () => $fetch.create(opts)

在这里，我们使用了ofetch中的onRequest拦截器
onRequest在ofetch被调用时立即被调用，允许修改选项或只执行简单的日志记录。
在那里你可以添加任何你想要的数据，如果你需要的话，你可以创建逻辑来传递参数给这个可组合的等等...
现在，要实际获取数据（使用composable）：

const http = useHttp() // useHttp is auto-imported
const data = await http('/url') // will trigger the interceptor

赞(0）回复(0）举报 2023-02-16

我来回答

vue.js 使用全局onRequest处理程序在nuxt 3中重新定义$fetch

1条答案

相关问题

热门标签

最新问答