Question

在我的VueJS应用程序中，我开始设置Axios服务来处理API调用。

应用程序的每个部分都有一个服务，例如，我有不同的服务来处理页面上的API调用：usersService.js，blogService.js，contactService.js，statisticsService.js，adminService.js等。

服务文件看起来与此类似：

import axios from "axios"

const apiClient = axios.create({
    baseURL: `http://foo.bar/api/`,
    withCredentials: false,
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    }
})

export default {
    get() {
        return apiClient.get("users")
    },
    set(data) {
        return apiClient.post("users", data)
    }
}

由于我有许多服务文件，因此在所有服务都从中获取其配置的基本配置文件（如baseURL，内容类型）将非常方便。

假设我希望在所有服务之间共享此部分，因此我可以为此创建一个基本配置文件：

import axios from "axios"

export default axios.create({
    baseURL: `http://foo.bar/api/`,
    withCredentials: false,
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    }
})

我可以从服务文件中调用它，例如：userService：

import HTTP from "@/baseConfig"

export default {
    get() {
        return HTTP.get("users")
    },
    set(data) {
        return HTTP.post("users", data)
    }
}

但是，我希望能够在需要时在每个服务文件中添加/更改其中一些默认值。

是否可以从这些服务文件中扩展或更改一些已经预定义的设置，例如baseURL或其他配置选项？

我想做这样的事情（注意基本URL的更改）-不起作用：

import HTTP from "@/baseConfig"

HTTP.baseURL = "http://foo.bar/api/special/"

export default {
    get() {
        return HTTP.get("users")
    },
    set(data) {
        return HTTP.post("users", data)
    }
}

在这种情况下，我想更改baseURL以从特殊用户获取数据。这有可能吗？可能是我不知道的一些基本Javascript规则-如果这是一个基本问题，就此道歉。

Answer 1

您可以执行以下操作。

基础

import axios from "axios"

export default (extraConfig = {}) => {
  return axios.create({
    baseURL: `http://foo.bar/api/`,
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    ...extraConfig
  })
}

然后在您的用户文件中。

import getHttp from "@/base"

const HTTP = getHttp({
    baseURL: 'http://foo.bar/api/special/' // this will override default one.
})

export default {
    get() {
        return HTTP.get("users")
    },
    set(data) {
        return HTTP.post("users", data)
    }
}

如何在VueJS中的服务之间共享Axios配置？

1 个答案: