第2章：使用axios/vue-resource发送HTTP请求

　　一，发送AJAX请求

　　1.简介

　　vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现

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

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

　　2.使用axios发送AJAX请求

　　2.1安装axios并引入

　　使用cnpm可以下载，下载到当前目录的node_modules/axios/dist下

cnpm install axios -Y

　　直接下载引入也可以

　　2.2基本用法

　　axios([options])

　　axios.get(url[,options]);

　　　　传参方式：

　　　　1.通过url传参

　　　　2.通过params选项传参

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

　　示例day02/01.html

　　先请求一个文本，看一下相应




    
    
    发送AJAX请求

　　页面显示

　　注意：需要使用web服务器访问，不能直接打开文件，如果直接打开html文件会提示错误

requests are only supported for protocol schemes

　　意思在支持的框架是http，data等，不支持file

　　本次我们在本机搭建了IIS服务器，在Linux上搭建Nginx也可以

　　resp相应包含很多信息如数据请求头相应状态码等，也可以直接打印json数据data

console.log(resp.data);

　　请求失败也会返回相应，增加失败的输出，需要修改设置一个不存在的文件即可观察到请求失败的输出

   send(){  
                        axios({
                            method:'get',   // 方法是get
                            url: 'user.jsonaaa' // url为当前文件夹下的一个json文件
                        }).then(function(resp){ // 请求完成成功后返回Proise对象，使用then调用这个对象 catch是请求失败调用
                            console.log(resp.data);
                        }).catch(resp => {
                            console.log('请求失败:'+resp.status+','+resp.statusText)
                        })
                    }

　　输出如下

　　通过url传递参数示例




    
    
    发送AJAX请求

　　解析

　　通过url往页面server.php传递键值对参数

axios.get('server.php?name=tom&age=23')

　　注意：访问需要配置好php环境搭建方法参考：

　　server.php

<?php
	//获取参数
	$name=$_GET['name'];
	$age=$_GET['age'];

	//响应数据
	echo '姓名：',$name,',年龄：',$age;
?>

　　页面显示

　　拼接方式如果键值对太多比较麻烦，可以通过params选项传参

   axios.get('server.php',{
                            params:{
                                name: 'alict',
                                age: 18
                            }
                        })

　　以上为get请求发送方式，下面演示post请求

　　axios.post(url,data,[options])?

　　代码增加一个post方法

sendPost(){
                        axios.post('server.php',{
                            params:{
                                name:'alice',
                                age:19
                            }
                        })
                        .then(resp =>{
                            console.log(resp.data);
                        }).catch(err =>{
                            console.log('请求失败:'+err.status+' '+err.statusText);
                        });
                    }

　　html代码

　　同时server.php也要修改GET方法为POST方法

　　页面显示

　　但是这里可以看到post发送的值，是一个json对象，不是以表单的形式发送

　　　axios的post发送请求有缺陷

　　　axios默认发送数据时，数据格式是Reques Payload，并非我们常用的表单Form Data格式，所以参数必须以键值对的形式传递，不能以json的方式传参

　　　1，自己拼接键值对

　　修改代码，改成拼接模式

 sendPost(){
                        // axios.post('server.php',{
                        //    params:{
                        //        name:'alice',
                        //        age:19
                        //    }
                        // })
                        axios.post('server.php','name=alice&age=20')
                        .then(resp =>{
                            console.log(resp.data);
                        }).catch(err =>{
                            console.log('请求失败:'+err.status+' '+err.statusText);
                        });
                    }

　　页面显示

　　自己拼接比较麻烦，使用转换数据的方法

　　2，使用transformRequest




    
    
    发送AJAX请求

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

　　练习：使用获取指定GitHub账户信息并显示01.html




    
    
    发送AJAX请求
    
    
    


    
        
        
        
        
                


                GitHub ID： 
                
                

                姓名：{{user.login}} 

                头像：

　　githup的用户api是公开的，可以通过用户的id进行获取

　　页面显示

　　注意：这里双向数据绑定要绑定uid，我觉得应该绑定user，不清楚为什么

　　3.使用vue-resource发送跨域请求

　　下载

cnpm install vue-resource@1.3.4 -S

　　引入

　　示例在360搜索里面搜索a

　　在01.html中增加以下代码

　　html中

　　中

sendJSONP(){
                        // https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&src=so_home&fields=word&word=a
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{
                            params:{
                                word:'a'
                            }
                        }).then(resp => {
                            console.log(resp.data.result)
                        });
                    },

　　参数是url以及需要搜索的a

　　返回和axios请求一样promise对象，使用resp.data.result输出，之前的result参数可能是s

　　页面显示

　　向百度发送JSONP请求

　　修改代码如下

　　html

sendJSONP2(){
                        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:'a'
                            },
                            jsonp:'cb'
                        }).then(resp => {
                            console.log(resp.data.s)
                        });
                    },

　　注意：百度使用的是wd，360使用的是word，//百度使用的jsonp参数名为cb，所以需要修改

使用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])

　　4.练习

　　百度搜索列表

　　百度搜索输入一个关键字会列出联想的一些关键字下面在输入框输入搜索关键字显示

　　02.html




	
	发送AJAX请求
	
	
	
	


	
		
		
			
				{{value}}
			
		
		暂无数据....

　　页面显示

Vue.js学习

第2章：使用axios/vue-resource发送HTTP请求

一，发送AJAX请求

1.简介

2.使用axios发送AJAX请求

2.1安装axios并引入

2.2基本用法

3.使用vue-resource发送跨域请求

4.练习

相关

标签