vue-cli 引入、配置axios的方法
一、npm安装axios,文件根目录下安装,指令如下
npminstallaxios--save-dev
二、修改原型链,在main.js中引入axios
importaxiosfrom'axios'
接着将axios改写为Vue的原型属性,
Vue.prototype.$http=axios
这样之后就可在每个组件的methods中调用$http命令完成数据请求
三、在组件中使用
methods:{ get(){ this.$http({ method:'get', url:'/url', data:{} }).then(function(res){ console.log(res) }).catch(function(err){ console.log(err) }) this.$http.get('/url').then(function(res){ console.log(res) }).catch(function(err){ console.log(err) }) } }
有关axios的配置请参考如下文档,点击打开链接
下面给大家介绍下vue-cli配置axios的方法
1.
npminstallaxios--save
2.
npminstall@type/axios--save-dev(使用ts编写的需要此声明文件,升级的axios好像不需要了,已经自带)
3.
在src目录下添加axios.ts文件,内容:
importaxiosfrom'axios' import{Notification}from'element-ui' importstorefrom'./store/index' importbuildconffrom'../config/build.rootpath.js' axios.defaults.withCredentials=true; axios.defaults.baseURL=buildconf.serverUrl //axios.defaults.baseURL='http://gsblackwidow.chinacloudsites.cn/' axios.interceptors.request.use(function(config){ //document.getElementById('g-loader').style.display='flex' store.commit('requestModify',1) returnconfig; },function(error){ returnPromise.reject(error) }) axios.interceptors.response.use(function(response){ store.commit('requestModify',-1) //document.getElementById('g-loader').style.display='none' returnresponse.data; },function(error){ store.commit('requestModify',-1) //document.getElementById('g-loader').style.display='none' if(error.response.status===401){ Notification({ title:'权限无效', message:'您的用户信息已经失效,请重新登录', type:'warning', offset:48 }); window.location.href='/#/login' }else{ Notification({ title:'请求错误', message:`${error.response.status}\n${error.config.url}`, type:'error', offset:48, }) } returnPromise.reject(error) }) exportdefaultaxios
4.
types文件夹中新建vue.d.ts文件,内容:
import{AxiosStatic,AxiosInstance}from'axios' declaremodule'vue/types/vue'{ interfaceVue{ $axios:AxiosStatic; } }
这样就可以在各个模块中通过this.$axios来使用axios了
其中axios中:
1.build.rootpath.js内容:
varpath=require('path') varrootpath=path.resolve(__dirname,'../dist') module.exports=rootpath
2.store是vuex的文件,所以要事先安装vuex
总结
以上所述是小编给大家介绍的vue-cli引入、配置axios的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!