Как разделить конфигурацию Ax ios между сервисами в VueJS? - PullRequest
Новая
       4

Как разделить конфигурацию Ax ios между сервисами в VueJS?

1 голос
/ 18 января 2020

В моем приложении VueJS я начал настраивать службы Ax ios для обработки вызовов API.

Для каждой части приложения есть один сервис, например, у меня есть разные службы для обработки API вызовы на таких страницах, как: usersService. js, blogService. js, contactService. js, statisticsService. js, adminService. js, et c.

Сервисный файл выглядит примерно так: 

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

Однако я хочу иметь возможность добавлять / изменять некоторые из этих значений по умолчанию в каждом отдельном служебном файле, когда это необходимо.

Можно ли расширить или изменить некоторые из тех алре ady предопределенные настройки, такие как 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 для получения данных от специальных пользователей. Возможно ли это как-то? Это, вероятно, какое-то базовое c Javascript правило, о котором я не знаю - поэтому извиняюсь, если это базовый c вопрос.

1 Ответ

1 голос
/ 18 января 2020

Вы можете сделать что-то вроде этого.

base 

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