vue2.0 异步加载 用axios实现。
配置:
1.安装axios到项目中,我利用的npm安装,npm i axios --save
2.在项目的入口文件中引入 axios,axios不是插件,所以不能用Vue.ues()的方式引入,具体如下图所示:
代码:
//6.0 导入一个axios实现ajax的异步请求 import axios from 'axios'; Vue.prototype.axios = axios;
3.在vue页面的script中methods使用axios,注意:
1.this.axios一定要等于入口文件中prototype.axios的名字一致;
2.this.axios里的回调函数会改变this,所以要修改data中的list 要先把this存起来 var _this = this;
代码:
<script> export default{ data(){ return{ list:[] } }, created(){ this.getlist(); }, methods:{ getlist(){ var url= 'http://localhost:3000/home'; var _this = this; this.axios.get(url).then(function (response) { var data = response.data; if (data.status !=0) { alert(data.message); return; } _this.list = data.message; }).catch(function (error) { console.log(error); }); } } } </script>
这样操作就可以完成axios的get请求配置。本案例的URL是通过mock模拟出来,如果不懂如何配置,可参考:https://www.cnblogs.com/qzccl/p/7792052.html