"Ошибка типа: не удается прочитать свойство 'get' неопределенного", Axios, Vue.JS

#vue.js #vuejs2 #axios #vue-component #vuex

#vue.js #vuejs2 #axios #vue-компонент #vuex

Вопрос:

Я получаю эту странную ошибку от Vue при попытке получить доступ к запросу get из api с использованием axios, я получаю «ошибка типа: не удается прочитать свойство ‘get’ неопределенного»

  <template>
    <div class="home">
        <h1>{{ msg }}</h1>
        <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
    </div>
</template>

<script>
    var Vue = require('vue');

   // import axios from "axios";

    window.axios=require('axios');
    export default {
        name: 'Home',
        props: {
            msg: String
        },
        component: {
        },   
        mounted: function () {
            alert('Hi ');
            this.axios.get('https://api.github.com/users')
                .then(value => {
                    alert(value);
                         
                });
        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

1. Это должно быть просто axios.get , не this.axios.get . Вы можете видеть, что this.axios используется в некоторых примерах, но в тех случаях, когда они были сохранены axios на this , что, похоже, не имеет места в вашем коде.

2. Я также предлагаю придерживаться import подхода, а не использовать require и window .

3. Спасибо @skirtle, очень ценю, сэр 🙂

Ответ №1:

this в вашем случае не ссылается на window . Лучшим подходом было бы импортировать axios в компонент:

 import axios from 'axios';

Более эффективный способ — установить его один раз глобально в main.js файле:

 Vue.prototype.$http = axios

И использовать его везде, где вы хотите, как this.$http