“TypeError：无法访问属性“get”，vue__WEBPACK_IMPORTED

Question

我在使用 vue 和 axios 时遇到问题，它说：[Vue warn]：创建的钩子出错：“TypeError：无法访问属性“get”，vue__WEBPACK_IMPORTED_MODULE_0__.default.axios未定义”这是我的代码api.service.jsimport 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();索引视图：getBanners() {            BannerDataService.all().then(response => {                console.debug(response)            }).catch(err => {                console.debug(err)            })        }错误控制台：[Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

Answer 1

您Api.service.js应该创建 axios 的实例，而不需要将其用作插件：

import axios from 'axios';

const ApiService = () =>

  axios.create({

    baseURL: 'yourbaseUrl',

    withCredentials: false,

    headers: {

      Accept: 'application/json',

      'Content-Type': 'application/json',

    },

   

  });

export default ApiService ;

作为函数进行BannerDataService.js调用()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();

上述语法独立于 ui 库/框架。