Question

在我的Vue应用程序中，就结构而言，逻辑类似于该出色的项目。这意味着在我的src文件夹中，我有一个utils文件夹，其中存放着文件request.js，并在此文件中创建了axios实例：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.BASE_API
})

当我想提交HTTP请求时，该实例将在整个项目中使用。例如：

import request from "@/utils/request";
request({
        url: `/some/dummy/endpoint`,
        method: "get"
      })
        .then(res => {
          console.log(res)
        .catch(e => console.log(e));

当我需要在baseURL不是process.env.BASE_API而是process.env.SECOND_BASE_API的几个特定地方提交HTTP请求时，就会出现问题。 axios可用，我可以按如下方式使用它：

   this.axios
    .get(`${process.env.SECOND_BASE_API}/api/profile`)
    .then(res => {
      console.log(res)
    })
    .catch(e => {
      console.log(e);
    });

但是我想知道是否有更优雅的方法来解决此问题，也许创建另一个实例？我的项目结构有何不同？还有其他见解吗？谢谢

Answer 1

您可以像创建request服务一样轻松地创建axios的第二个实例。

如果我是您（请注意，这纯粹是基于观点），那么我将使用API名称来命名我的请求服务。我将拥有mainApi和secondaryApi。或weatherApi和translateApi：

utils / mainApi.js

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.BASE_API
})

export default service

utils / secondaryApi.js

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.SECOND_BASE_API
})

export default service

您将可以像下面这样在组件中使用API：

import mainApi from "@/utils/mainApi"

mainApi({
    url: `/some/dummy/endpoint`,
    method: "get"
}).then(res => {
    console.log(res)
}).catch(e => console.log(e))

对于您的辅助API：

import secondaryApi from "@/utils/secondaryApi"

secondaryApi({
    url: `/some/dummy/endpoint`,
    method: "get"
}).then(res => {
    console.log(res)
}).catch(e => console.log(e))

这里要注意的重要一点是axios.create(...)创建了一个完全不同的axios实例，并且为每个实例配置的选项是分开的

在Central axios中使用不同的基本URL

1 个答案: