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

在我的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规则，所以如果这是一个基本问题，我深表歉意。

您可以这样做

基础

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)
    }
}