Используйте разные базовые URL с центральными осями

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

проблема возникает, когда в нескольких конкретных местах мне нужно зафиксировать HTTP-запрос, где baseURL не process.env.BASE_API, а process.env.SECOND_BASE_API.Axios доступен, и я могу просто использовать его следующим образом:

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

но мне интересно, есть ли более элегантный способ решения этой проблемы, может быть, создать еще один экземпляр?по-другому структурировать мой проект?любое другое понимание ??спасибо

Answer 1

вы можете легко создать второй экземпляр axios точно так же, как вы делали это для службы request.

Если бы я был вами (обратите внимание, что это чисто мнение), я бы назвал свои службы запросов, используя имя 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 / primaryApi.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 и что параметры, которые вы настраиваете для каждого экземпляра, отделены