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

Question

我在使用 vue 和 axios 时遇到问题，它说：

[Vue warn]：创建的钩子出错：“TypeError：无法访问属性“get”，vue__WEBPACK_IMPORTED_MODULE_0__.default.axios未定义”

这是我的代码

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();

索引视图：

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 库/框架。