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

【问题标题】：How to share Axios configuration between services in VueJS?如何在 VueJS 中的服务之间共享 Axios 配置？
【发布时间】：2020-05-05 02:40:27
【问题描述】：

在我的 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、content-type。

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

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 规则 - 如果这是一个基本问题，请道歉。

【问题讨论】：

标签： javascript vue.js ecmascript-6 vuejs2 axios

【解决方案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)
    }
}

【讨论】：