vue 发送ajax请求

「爱情、让人受尽委屈。」 2022-05-17 00:20 283阅读 0赞

一、 简介

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

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

### 　　3、参考：GitHub上搜索axios，查看API文档      二、 使用axios发送AJAX请求      　　1、安装axios并引入 ###

1、npm install axios -S        \#直接下载axios组件，下载完毕后axios.js就存放在node\_modules\\axios\\dist中

2、网上直接下载axios.min.js文件

3、通过script src的方式进行文件的引入  
  
　　2、发送get请求

1、基本使用格式

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

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

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

3、案例：

<!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:'#itany',
                    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="itany">
            <button @click="send">发送AJAX请求</button>
    
            <button @click="sendGet">GET方式发送AJAX请求</button>
    
        </div>
    </body>
    </html>

3、发送post请求（push,delete的非get方式的请求都一样）

1、基本使用格式

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

2、传参方式

1、自己拼接为键值对

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

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

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

3、案例：

<!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:'#itany',
                    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="itany">
            <button @click="send">发送AJAX请求</button>
    
            <button @click="sendGet">GET方式发送AJAX请求</button>
    
        </div>
    </body>
    </html>

### 　　4、发送跨域请求       　　   1、须知：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库 ###

2、使用vue-resource发送跨域请求

3、 安装vue-resource并引入

npm info vue-resource           \#查看vue-resource 版本信息  
   　　　　　　 cnpm install vue-resource -S \#等同于cnpm install vue-resource -save

4、 基本使用方法（使用this.$http发送请求）

this.$http.get(url, \[options\])

this.$http.head(url, \[options\])

this.$http.delete(url, \[options\])

this.$http.jsonp(url, \[options\])

this.$http.post(url, \[body\], \[options\])

this.$http.put(url, \[body\], \[options\])

this.$http.patch(url, \[body\], \[options\])

5、案例

![ContractedBlock.gif][] 基本发送方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>发送AJAX请求</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script src="js/vue-resource.js"></script>
    </head>
    
    <body>
    <div id="itany">
        <a>{
       {name}}</a>
    
        <button v-on:click="send">sendJSONP</button>
    
    </div>
    </body>
    <script>
        new Vue({
            el: '#itany',
            data:{
                name: 'alice',
                age: 19
                        },
            methods:{
                send:function(){
    //                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
                    this.$http.jsonp('https://sug.so.360.cn/suggest',
                        {params:{
                            word:'a'
                        }}
                    ).then(function (resp) {
                        console.log(resp.data)
                    })
    
                }
            }
        })
    </script>
    </html>
    
    基本发送方式

![ContractedBlock.gif][] 基本发送方式2

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>发送AJAX请求</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script src="js/vue-resource.js"></script>
    </head>
    
    <body>
    <div id="itany">
        <a>{
       {name}}</a>
    
        <button v-on:click="send">sendJSONP</button>
    
    </div>
    </body>
    <script>
        new Vue({
            el: '#itany',
            data:{
                name: 'alice',
                age: 19
                        },
            methods:{
                send:function(){
    //                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
                    this.$http.jsonp('https://sug.so.360.cn/suggest',
                        {params:{
                            word:'a'
                        }}
                    ).then(resp=> {
                        console.log(resp.data)
                    })
    
                }
            }
        })
    </script>
    </html>
    
    基本发送方式2

![ContractedBlock.gif][] 带jionsp参数的

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>发送AJAX请求</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script src="js/vue-resource.js"></script>
    </head>
    <body>
    <div id="itany">
        <button v-on:click="send">向百度搜索发送JSONP请求</button>
    </div>
    </body>
    <script>
        new Vue({
            el:'#itany',
            data:{
                name:'za'
            },
            methods:{
                send:function () {
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                        {params:{wd:'a'},
                            jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改
                        }).then(function (resp) {
                        console.log(resp.data)
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            }
    
    
        })
    </script>
    </html>
    
    带jionsp参数的

原文链接：[https://www.cnblogs.com/xuanan/p/7847233.html][https_www.cnblogs.com_xuanan_p_7847233.html]

[ContractedBlock.gif]: /images/20220517/e2007cf0cff645829b5f9c78229c99a7.png
[https_www.cnblogs.com_xuanan_p_7847233.html]: https://www.cnblogs.com/xuanan/p/7847233.html