CODEWITHSUNDEEP
javascriptvue.jsecmascript-6vuejs2axios
Radical_Activity
Radical_Activity

Reputation: 2738

How to share Axios configuration between services in VueJS?

In my VueJS application, I started setting up Axios services to handle API calls.

There's one service for each part of the application, for example, I have different services to handle API calls on pages like: usersService.js, blogService.js, contactService.js, statisticsService.js, adminService.js, etc.

A service file looks similar to this:

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

Since I have numerous service files, it would be very convenient to create a base configuration file where all the services are getting their config from, such as the baseURL, content-type.

Let's say I want this part to be shared among all the services, so I can create a base config file for that:

import axios from "axios"

export default axios.create({
    baseURL: `http://foo.bar/api/`,
    withCredentials: false,
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    }
})

And I could call it from a service file, e.g.: userService:

import HTTP from "@/baseConfig"

export default {
    get() {
        return HTTP.get("users")
    },
    set(data) {
        return HTTP.post("users", data)
    }
}

However, I want to be able to add/change some of those defaults in every single service file when needed.

Is it possible to extend or change some of those already predefined settings such as the baseURL or the other configuration options from these service files?

I want to do something like this (notice the change in the base URL) - which is not working:

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

In this case I wanted to change the baseURL to fetch data from special users. Is this possible somehow? It is probably some basic Javascript rule that I'm not aware of - so apologies if it's a basic question.

Upvotes: 1

Views: 975

Answers (1)

Nafees Anwar
Nafees Anwar

Reputation: 6608

You can do something like this.

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

And then in your users file.

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

Upvotes: 2

Related Questions