CODEWITHSUNDEEP
vue.jsvuex
ytsejam
ytsejam

Reputation: 3429

vue-axios BASE_URL is not applied

I am having a problem about applying my api config when using vue-axios. when I check request url, I only see the address I add in the get function and BASE_URL is not seen. When I hard code I can get my object from DRF. my services file:

// export const API_URL = 'http://localhost:8000/api' (config.js file)
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { API_URL } from '@/services/config'
const ApiService = {
  init () {
    Vue.use(VueAxios, axios)
    Vue.axios.defaults.baseURL = API_URL
  },
  get (resource, slug = "") {
    return Vue.axios
        .get(`${resource}/${slug}`)
        .catch((error) => {
          throw new Error(`ApiService ${error}`)
    })
  },
};
export default ApiService

and my vuex store.js file

const actions = {
  [FETCH_ARTICLES] (context) {
    context.commit(FETCH_START)
    return ApiService
      .get('articles')
      .then((data) => {
        context.commit(SET_ARTICLES, data.articles.results);
        context.commit(FETCH_END)
      })
      .catch((response) => {
        context.commit(SET_ERROR, response.data.errors)
      })
  },
  [FETCH_INDEX_ARTICLES] (context) {
    context.commit(FETCH_START)
    return axios('http://localhost:8000/api/articlelist/index/')
      .then((data) => {
        console.log(data.data);
        context.commit(SET_ARTICLES, data.data);
        context.commit(FETCH_END)
      })
      .catch((response) => {
        context.commit(SET_ERROR, response.data.errors);
      })
    }
};

First address does not work but second address is working as I hard code them. How can I correct it ?

Thanks

Upvotes: 0

Views: 364

Answers (1)

Danil Speransky
Danil Speransky

Reputation: 30453

ApiService is an object and you use its get property.

You don't call init anywhere in code and so you don't actually set baseURL.

Upvotes: 1

Related Questions