在Laravel+Vue项目中，我试图使用axios获得API响应Axios调用Laravel端点并获取控制器响应。
代码看起来像
JS-
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";
import Vuetify from "vuetify";
import es from "vuetify/es5/locale/es";
import en from "vuetify/es5/locale/en";
import "@mdi/font/css/materialdesignicons.css";
import ContadoresComponent from "./components/ContadorComponent.vue";
import GatewaysComponent from "./components/GatewayComponent.vue";
import MainComponent from "./components/MainComponent.vue";
const routes = [{
path: "/",
name: "principal",
component: MainComponent
},
{
path: "/contadores",
name: "contadores",
component: ContadoresComponent
},
{
path: "/gateways",
name: "gateways",
component: GatewaysComponent
}
];
window.Vue = require("vue");
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(axios);
Vue.component(
"drawer-component",
require("./components/DrawerComponent.vue").default
/* methods: {
changeLocale (lang) {
this.$vuetify.lang.current = lang
},
},*/
);
Vue.component(
"table-component",
require("./components/TableComponent.vue").default
);
export default new Vuetify({
icons: {
iconfont: "mdi"
},
lang: {
locales: {
es,
en
},
current: "es"
}
});
const router = new VueRouter({
routes
});
new Vue({
vuetify: new Vuetify(),
router
}).$mount("#app");
Vue(Vuetify(
<template>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-card class="mx-auto">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Contador</v-list-item-title>
</v-list-item-content>
</v-list-item>
<table-component></table-component>
</v-card>
</v-row>
</v-container>
</template>
<script>
axios.get("/contadores").then(response => console.log(response));
</script>
错误：Return axios没有定义，但我认为我是在App.js文件中定义的。
有人看到错误了吗？
您仍然需要在第二个文件中导入它。你的标签应该是这样的：
<script>
import axios from 'axios';
axios.get("/contadores").then(response => console.log(response));
</script>
您尚未在文件中导入axios。
要解决这个问题，请将其导入到您想要使用的文件中，如下所示
import axios from 'axios';
或
如果你不想在使用它的每个组件中导入它，你可以将它添加到Vue原型中：
window.axios = require('axios');
//... configure axios...
Vue.prototype.$http = window.axios;
然后在任何组件中都可以使用
this.$http.post('event/store', {
'name': this.name,
})
我在项目中使用的一种有趣的方法是使用库vue axios，它安装起来非常简单。如果您需要通过命令npm install --save axios vue-axios在项目中安装依赖项，然后将其导入main.js文件或应用程序的主文件：
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use (VueAxios, axios)
组件中axios的使用将通过this.axios.get(`${url}`)进行。StackOverflow的朋友们已经公开的另一种方法是将axios直接导入到您想要使用的组件中：
<template>
<div>
...
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ComponentName',
methods: {
async getAsyncApi() {
try {
const result = await axios.get(`${url}`);
} catch(e) {
window.console.error('Error! ', e.message);
}
},
getApi() {
let result;
axios.get(`${url}`).then((r) => {
result = r;
}).catch(e => window.console.error('Error! ', e.message));
},
},
};
</script>
我用修复了错误
export default {
mounted() {
axios
.get("ENDPOINT")
.then(response => console.log(response));
}
};