vue向后台发送ajax请求的两种方式

琰哥踩过的那些坑之——VUE的ajax请求

项目需求中有些数据需要遍历，这种情况下vue算是比较合适的，这里只是对vue的简单运用，采用的是引入js的方式。

有两种方式，一种是引入“vue-resource.js”,  另一种则是引入“axios.min.js”.

    <script src="/vue/vue.min.js"></script>
    <script src="/vue/axios.min.js"></script>
    <script src="/vue/vue-resource.js"></script>

1.第一种方式：vue-resource.js

 

new Vue({
            el:"#wrapper",
            data:{
                str:"xiaoming",
                arr:[]
            },
            methods:{
                links:function () {
                    this.$http.get('http://localhost:8081/menu/getMenuLinks').then((res) => {
                        console.log(res.data);
                        this.arr=res.data;
                    });
                    return this.arr;
                }
            }
        })

然后我们看一下浏览器打印的日志：

图片可能有些不清晰，但是可以很明显看出这是他妈的是字符串  这让我咋遍历啊，然后各种将字符串转换成json,还是没什么卵用，因为这个耽误了半天，，，无奈之下只得抱着试一试的心态尝试第二种方式。

2.第二种方式：axios.min.js

new Vue({
            el:"#wrapper",
            data:{
                str:"xiaoming",
                arr:[]
            },
            methods:{
                links:function () {
                    axios.get("http://localhost:8081/menu/getMenuLinks").then (function (res) {
                        console.log(res.data);
                        this.arr = res.data;
                    })
                    return this.arr;
                }
            }
        })

然后我们再看一下这种方式下打印的日志：

然后得到的数据就正常了。

总结：

这里只是用get请求做例子，可以看出，两种请求方式的差异还蛮大的，官网好像对vue-resource不再更新了，所以我个人还是比较推荐用axios这种方式的。

希望大家以后不要再踩这个坑！