vue2.0 之axios

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