正确解决vue中axios is not defined

吃不胖爹

于 2021-11-04 16:57:58 发布

阅读量4.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43894292/article/details/121146364

版权

本文介绍在Vue项目中如何正确配置并使用Axios进行前后端数据交互，包括引入Axios的方式及常见错误提示的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios已经是安装好的状态
在学习vue时，前段请求后端数据时浏览器出现下面提示的错误
1.在main.js下

import VueAxios from 'vue-axios';
import axios from 'axios';

2.使用的npm 例子的代码如下

created(){
    const  _this = this
    axios.get('http://localhost:8081/book/findall').then(function (resp) {
        _this.books = resp.data;
      })
  }
}

3.请求时浏览器出现以下错误

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in created hook: "ReferenceError: axios is not defined"
found in
---> <Book> at src/components/Book.vue
   <App> at src/App.vue
     <Root>
     warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629

解决办法
在main.js下改成

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.prototype.$axios = axios;

例子的代码改成：

created(){
    const  _this = this
    this.$axios.get('http://localhost:8081/book/findall').then(function (resp) {
        _this.books = resp.data;
      })
  }
}