总结54 Vue中的异步请求插件<axios>应用

超级注意:将响应数据赋值给elementUI标签

如果你要让前端显示你所获取到的响应数据,那么必须要用箭头函数,否则this会被视为是window对象

概述

我之前说过,目前的开发项目中,vue的异步请求技术逐渐取代了jquery的异步请求技术
而vue的异步请求技术是基于一个插件实现的,名字叫做axios
axios中的异步请求语法分为config格式语法和简单格式语法.这其实跟jquery的异步请求语法分类有点像.这两种异步请求语法他们在实际的应用中,并无区别.

准备一:下载并导入axios插件

导入不用我说了吧?
就直接附上axios的js插件了.
链接: https://pan.baidu.com/s/19hRxKV4iH74xdrgHFfx1JQ
提取码: 7rt1

准备二:在web层定义跨域请求处理

所谓跨域请求,就是你所异步请求的web目标不在页面所属的项目中,或者不属于当前页面的域名之下.
如果出现这种情况,我们就需要在web目标定义跨域请求规则.
格式:@CrossOrigin(origins = “域名”)
如果域名为星号’*’,则代表允许所有跨域请求.

准备三:在web层规定列表(用于post)

如果我们的异步请求是post方式,则需要在web层中方法的形参处通过RequestBody注解来规定所要接受的形参列表.
否则,web层接收到的post请求数据将为null.
关于RequestBody注解的作用,看之前的这篇文章:https://blog.csdn.net/chinatopno1/article/details/105130816

语法格式一:config格式

get异步请求

格式:

 var 自定义vue对象名 = new Vue({
        el:"#指定目标div标签的id",

        methods:{
            自定义事件之函数方法(){
                axios({
                url:"url地址",
                method:"get",
                params:{
                    //此处要定义提交的数据键值对
                    欲提交键值一:对应值,
					欲提交键值二:对应值

                },
                 responseType:"后台所返回的相应类型,默认为json"

                }).then(function (接收响应信息的结果) {//如果请求成功,则运行then方法
                   //函数方法体
                }).catch(function () {//如果请求失败,则运行catch方法
                   //函数方法体
                })

            }
        }



    });

列如:

 var app = new Vue({

        el:"#divid",
        created(){
            axios({

                url:"1.vue入门.html",
                method:"get",
                params:{
                    username:"zhanfgsan",
                    password:123


                },
                responseType:"json"

            }).then(function (result) {//如果请求成功
            alert("............");
                alert(result.data);
            }).catch(function (erro) {//如果请求失败
            alert("erro");
            })



        }



    });

post异步请求

格式:

 var 自定义vue对象名 = new Vue({
        el:"#指定目标div标签的id",

        methods:{
            自定义事件之函数方法(){
                axios({
                url:"url地址",
                method:"post",
 				data:{
                    //此处要定义提交的数据键值对
                    欲提交键值一:对应值,
					欲提交键值二:对应值
                },
               responseType:"后台所返回的相应类型,默认为json"

                }).then(function (接收响应信息的结果) {//如果请求成功,则运行then方法
                   //函数方法体
                }).catch(function () {//如果请求失败,则运行catch方法
                   //函数方法体
                })

            }
        }



    });

列如:

<script>
    var configpost = new Vue({
        el:"#configpost",

        methods:{
            configajax_post(){
                axios({

                    url:"1.vue入门.html",
                    method:"post",
                    data:{
                        //定义要相应的参数
                        username:"12121",
                        password:12121,
                    }

                }).then(function (result) {//如果请求成功
                    alert("............");
                    alert(result.data);
                }).catch(function (erro) {//如果请求失败
                    alert("erro");
                })

            }
        }



    });



</script>

语法格式二:简单格式

get异步请求

格式:

 var 自定义vue对象名 = new Vue({
        el:"#指定目标div标签的id",

        methods:{
            自定义事件之函数方法(){

                .get("url",{
                   //定义params,在里面定义请求参数
                    params:{
                    欲提交键值一:对应值,
					欲提交键值二:对应值,
                    },
                    //设置前端返回过来的响应类型
                    responseType:"自定义响应类型"//在get方式下,你必须指定一个相应类型

                })
                .then(function (接收响应信息的结果){{//如果请求成功
             		//函数方法体
                 })
                .catch(function () {//如果请求失败
                    //函数方法体
                });

            }
        }



    });

列如:

var bpp = new Vue({
    el:"#two",
    methods:{
        ajax_get(){
            axios.get("1.vue入门.html",{
                   //定义params,在里面定义请求参数
                    params:{
                        name:"test",
                        uid:1,
                    },
                    //设置前端返回过来的响应类型
                    responseType:"json"

                })
                .then(function (接收响应信息的结果){
                alert(result.data);
                 })
                .catch(function () {
                    alert("请求失败");
                });
        },

    },


});

post异步请求

格式:

 var 自定义vue对象名 = new Vue({
        el:"#指定目标div标签的id",

        methods:{
            自定义事件之函数方法(){
     		axios.post("url",{
                  欲提交键值一:对应值,
				  欲提交键值二:对应值,
            },
            {
                responseType: '相应类型'//  在post请求下,如果后端返回的响应类型为json类型,你可以省略大括号{resopnseType:"json"}这行代码,即:post请求下,默认响应类型为json
            } )
                .then(function (接收响应信息的结果) {//如果请求成功
                  //方法函数体
                })
                .catch(function () {//如果请求失败
                  //方法函数体
                })


            }
        }



    });

列如:

    var cpp = new Vue({

       el:"#three",
       methods: {
        ajax_post(){
            axios.post("1.vue入门.html",{
                name:"wangwu",
                password:"123",
            },
            {
                responseType: 'json'//  在post请求下,如果后端返回的响应类型为json类型,你可以省略大括号{resopnseType:"json"}这行代码,即:post请求下,默认响应类型为json
            } )
                .then(function (result) {
                    alert(result.data);
                })
                .catch(function () {
                    alert("post请求失败");
                })



        }

       }


    });

   

返回数据的获取

返回的数据,是被axios通过集合封装过的.
其中,data才是后端返回过来的真实数据.

注意:指定要提交的数据内容

无论是get方式还是post方式,你都可以不必在axios来定义要提交的参数.也就是说,你可以直接引用data键下的参数,来进行提交.