在Laravel/Vue中通过Axios获取数据

Question

我在获取数据方面有问题。这是控制台中弹出的错误。。。

未捕获的错误：模块构建失败（来自。/node_modules/Babel-loader/lib/index.js）： SynTaxError： /var/www/html/laravel/resources/js/components/Content.vue： const是一个保留字（8:4）

我在用法上做错了什么吗？

<template>

</template>

<script>
  export default {

    const axios = require('axios');

    axios.get('/ajax')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
    });

}
</script>

也在App.js中

require('./bootstrap');

window.Vue = require('vue');


// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('content-wrap', require('./components/Content.vue').default);


const app = new Vue({
    el: '#app'
});

Answer 1

好的，首先，您的语法错误导出默认值{}导出一个对象，但是您的语法不正确。

对象语法为key:value，由，

Ex：

import axios from 'axios';

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}

另外，我认为理解es6模块会对您有所帮助，因此这里有一个链接：https://www.sitepoint.com/understanding-es6-modules/

Answer 2

@Barbie尝试添加. babelrc配置文件

Answer 3

您使用的是Laravel，因此axios已准备就绪（请查看require（'/bootstrap'）文件）。在组件中，导出默认值{}是错误的。它是一个对象，所以请将其视为一个对象：

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}