CODEWITHSUNDEEP
javascriptvue.jsaxios
Matthew
Matthew

Reputation: 197

"TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

I got a problem with using vue with axios it says:

[Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

here is my code

Api.service.js

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "./jwt.service";


const ApiService = {
    init() {

        Vue.use(VueAxios, axios);
        axios.defaults.baseURL = "http://hyper.test/api";
    },
}

BannerDataService.js:

import ApiService from "../api.service";

class BannerDataService {
    constructor() {
        // ApiService.setHeader();
        // ApiService.adminScope();
    }

    all() {
        return ApiService.get('site/banners')
    }

    get(id) {
        return ApiService.get(`site/banners/${id}`)
    }
}

export default new BannerDataService();

Index.vue:

getBanners() {
            BannerDataService.all().then(response => {
                console.debug(response)
            }).catch(err => {
                console.debug(err)
            })
        }

error console:

[Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

Upvotes: 2

Views: 2053

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

in Api.service.js you should create an instance of axios without need to use it as plugin :

import axios from 'axios';


const ApiService = () =>
  axios.create({
    baseURL: 'yourbaseUrl',
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
   
  });

export default ApiService ;

in BannerDataService.js call as function with () like ApiService().get(...) 

import ApiService from "../api.service";

class BannerDataService {
    constructor() {
        // ApiService.setHeader();
        // ApiService.adminScope();
    }

    all() {
        return ApiService().get('site/banners')
    }

    get(id) {
        return ApiService().get(`site/banners/${id}`)
    }
}

export default new BannerDataService();

the above syntax is independent on ui library/framework.

Upvotes: 1

Related Questions