在 Nuxt (Vue) 中使用 Axios 内部服务答案

【问题标题】：Use Axios inside service in Nuxt (Vue)在 Nuxt (Vue) 中使用 Axios 内部服务
【发布时间】：2021-01-24 18:18:08
【问题描述】：

我正在尝试在 Nuxt 项目中使用 nuxt 配置的 axios 实例，如下所示：

import axios from 'axios';

export default {
  async create (user) {
     axios.post('/api/user', { user })
  }
}

我在plugins 文件夹中定义了拦截器，它将令牌添加到每个请求的标头：

export default ({ $axios, store }) => {
  $axios.onRequest((config) => {
    if (store.token) {
      config.headers.common.Authorization = store.token
    }
  })
}

当我在服务中使用 axios 时，因为我显示请求不包含授权标头。

如果我像 this.$axios 这样在组件或 vuex 中调用 axios 方法，则请求包含所需的标头。但是这种方式在服务中不起作用，因为如果我在服务中使用this.$axios，我会得到undefined。在 Nuxt 的服务中使用已配置的 axios 或使其可在服务中注入的正确方法是什么？

【问题讨论】：

我在您提到的代码中没有看到自定义 Axios 实例。这只是导入 axios 包。
@tony19 这是唯一允许我在这里使用 axios 的东西。在组件和商店中，我使用的是 this.$axios ...，它不适用于像这个服务这样的自定义组件，所以这就是我问这个问题的原因

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

问题是您直接从axios 导入axios，但插件@nuxtjs/axios 创建了一个新实例以使用nuxt 特定的配置选项（仔细查看./node_modules/@nuxtjs/axios/lib/plugin.js 显示const axios = Axios.create(axiosOptions)）。因此，您必须使用此实例来访问 Authorization 标头。

因此，您也必须将您的服务注册为nuxt plugin 并注入您的功能。请看一个未经测试的示例，但它显示了我在一些自定义插件中使用的方法：

export default function ({ $axios }, inject) {
  
  const myService = {
    async create (user) {
      $axios.post('/api/user', { user })
    }
  }

  // Will be available in the components as this.$myService
  inject('myService', myService)

}

【讨论】：