vue2总结巩固-axios

`介绍`

1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现

2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

3、参考：GitHub上搜索axios，查看API文档

使用

npm install axios #直接下载axios组件

get

1、基本使用格式

格式1：axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典

格式2：axios.get(url[,options]);

2、传参方式：通过url传参、通过params选项传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{
                    send(){
                        axios({
                            method:'get',
                            url:'http://www.baidu.com?name=tom&age=23'
                        }).then(function(resp){
                            console.log(resp.data);
                        }).catch(resp => {
                            console.log('请求失败：'+resp.status+','+resp.statusText);
                        });
                    },
                    sendGet(){
                        axios.get('server.php',{
                            params:{
                                name:'alice',
                                age:19
                            }
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {             //
                            console.log('请求失败：'+err.status+','+err.statusText);
                        });
                    },
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <button @click="send">发送AJAX请求</button>
        <button @click="sendGet">GET方式发送AJAX请求</button>
    </div>
</body>
</html>

post

1、基本使用格式

格式：axios.post(url,data,[options]);

2、传参方式

1、自己拼接为键值对

2、使用transformRequest，在请求发送前将请求数据进行转换

3、如果使用模块化开发，可以使用qs模块进行转换

4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    user:{
                        name:'alice',
                        age:19
                    },
                },
                methods:{
                    sendPost(){
                        // axios.post('server.php',{
                        //         name:'alice',
                        //         age:19
                        // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
                        // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
                        axios.post('server.php',this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('请求失败：'+err.status+','+err.statusText);
                        });
                    },
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <button @click="send">发送AJAX请求</button>
        <button @click="sendGet">GET方式发送AJAX请求</button>
    </div>
</body>
</html>

vue2总结巩固-axios

`介绍`

使用

get

post

相关推荐

一文吃透WebSocket

Webpack 核心配置总结与补充

15 个有用的 CSS 属性

关于 Axios 的再封装

归档

分类