当前位置: 首页 > Web前端 > HTML

为什么我用Vue.use(axios)就报错了!?

时间:2023-03-29 10:59:10 HTML

我用vue这么久了,就是不知道vue.use()是什么。..还记得之前实践过一个项目,使用axios,然后报错,后面无法请求和获取数据。文件不在身边,我就在现场还原了场景,也算是记录了我之前犯的错误。util文件夹下的request.js文件importaxiosfrom'axios';从“qs”导入qs;constaxiosInstance=axios.create({baseURL:'http://example.com',//当时使用的真实地址(可以请求)timeout:5000,})//设置一个请求拦截器来处理post方法传递的参数格式axiosInstance.intercepter.request.use(config=>{//使用qs转换数据的格式,以便post方法正确识别传递的参数config.data=config.method=='post'?qs.stringify(config.data):config.data;returnconfig;},err=>Promise.reject(console.log(err)))exportdefaultaxiosInstance;main.js文件importVuefrom'vue';importAppfrom'./App.vue';importaxiosfrom'../util/request.js';//自己封装axios挂载在vue的实例对象上forglobaluseVue.prototype.$axios=axios;//其实我这里不用再操作了...然后鬼畜...Vue.use(axios);//报错的点,我迷茫了很久,一行一行调试代码才发现,狠!!!newVue({render:function(h){returnh(App);}}).$mount('$app')然后就开始报错了。.甚至报跨域错误。.然后设置了proxy代理,一大堆,终于发现扯远了(请求的url后台已经跨域处理了)调试Vue.use的时候才发现,原来是因为写了这么一个额外的线。错误。到这里我有个疑问,Vue.use()不是全局混入vue的插件吗?为什么axios不能使用use方法呢?Vue.use()究竟是什么?于是,上网查了一些资料《Vue.use()是干什么用的?通过学习,发现Vue.use()方法其实是调用插件中的install函数,在use()方法中检测传入函数。不管是对象还是函数,如果是对象,则调用对象中的install方法(function),如果是函数(function),则直接调用函数(插件本身)。通过打印axios的类型,可以清楚的看出axios插件本身是一个函数(function),所以Vue.use会直接调用axios。//在这里希望不要误导一些刚刚在这里学习的朋友,即如果你想在Vue中使用axios//你不需要使用Vue.use(axios)//在Vue实例中挂载它对象,可以直接在其他组件中使用,避坑避坑!但是有一个很重要的点,我还是不太明白,就是为什么Vue.use(axios)会报跨域错误?我会继续查资料,了解这件事。当然,如果有谁知道,请在评论区告诉我,谢谢你的无私分享!破案了!axios不能用vue.use()引入的原因其实和上面说的一样。axios本身是一个函数,但不能像install()那样调用。所以最后做一个总结:在使用Vue.use()时,传入的参数要么是一个对象(Object),这个Object必须提供并暴露一个install函数;或者是一个函数(function),这个函数会被调用为install。而且axios不是一个对象,本身也不是install一样可以调用的函数,所以引入axios后就可以直接使用了,不用Vue.use()做全局混用,直接挂载axios就可以了可以在Vue的实例对象上全局使用!