Vue2.0笔记——Ajax，JSONP跨域

Ajax实现

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。
参考GitHub上的axios,dist目录下的文件就是axios.min.js。
语法:

axios([options])axios.get(url[,options])    传参方式:        1.通过url传参        2.通过params选项传参

案例:axios([options])

data:{            id:1001        },    methods:{            sendAjax(){                axios({                    method:'get',                    url:'https://api.github.com/users/' + vm.id                }).then(function(resp){ //表示请求成功，将执行的回调函数                    console.log(resp.data);                    vm.user=resp.data;                }).catch(function(){  //请求失败，将执行的回调函数                    console.log('请求失败' + resp.status + ',' + resp.statusText);                });            }        }

在这个代码中，github是一个开源网站，所以可以访问到用户的信息。
1.vm.id表示vm引用当前Vue实例的属性，在后面Vue实例中说明。
2.axios表示执行ajax请求，method选项表示请求方式，url表示请求路径。
3..then回调函数，表示请求成功将被执行,resp为请求成功返回的数据。
4.catch表示请求失败将被执行的回调函数。。

axiso.get(url[,options])

与其类似，但需要注意，第一个参数为url，后面才是选项。

sendAjaxGet(){                axios.get('/user',{                    params:{                        id:1001                    }                }).then(function(resp){                    console.log(resp.data);                    vm.user=resp.data;                }).catch(function(){                    console.log('请求失败' + resp.status + ',' + resp.statusText);                });            }

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

post方式请求，第一个参数为请求路径，第二个参数直接就是需要传递的数据，格式为json格式，后面的为选项。

sendAjaxPost(){    axios.post('server.php',{        name:'KaiEr',        age:19    }).then(function(resp){        console.log(resp.data);    }).catch(function(){        console.log('请求失败' + resp.status + ',' + resp.statusText);    });}

还有其他的Request Config请求配置
如:transformRequest

transformRequest: [function (data, headers) {    // Do whatever you want to transform the data    return data;  }],

按照文档的意思是说，在请求数据发到服务器之前对其进行更改，仅适用于'PUT','POST'和'PATCH'。
该值为数组， 数组中最后一个函数应返回一个字符串或Buffer，ArrayBuffer实例。其实返回字符串就可以。
该函数接收的data参数表示传递的数据，即post方式请求的第二个参数。
<br/>
还有如

• timeout：表示请求超时的毫秒数

• heads：自定义头部文件

• responseType：响应类型

• responseEncoding：响应编码格式

等等，都可以在Github的axios项目的README.md文件中查看文档。
GitHub的axios开源项目

JSONP跨域请求

axios本身并不支持发送跨域的请求，没有提供相应的API。
尽管vue-resource不再维护，但是还可以使用它来进行跨域请求。
您可以考虑使用Jquery.js来进行跨域请求和Ajax请求。然而还有其他使用ajax跨域的更好方法。我们只是说明Vue也可以支持此功能，但如果需要，你任然可以选择。

引入vue-resource.js文件,可以访问Github的vue-resource项目
文档语法:

this.$http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);

• get(url, [config])

• head(url, [config])

• delete(url, [config])

• jsonp(url, [config])

• post(url, [body], [config])

• put(url, [body], [config])

• patch(url, [body], [config])

Example:

{  // GET /someUrl  this.$http.get('/someUrl').then(response => {    // get body data    this.someData = response.body;  }, response => {    // error callback  });}

案例:
通过跨域请求Baidu的搜索,打开百度，F12，输入a字符，搜索，Ajax请求，network中找到这样一条请求。
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1444_12897_21084_26182_22158&req=2&csor=1&cb=jQuery110209410333632536945_1523889174484&_=1523889174489

wd代表搜索的单词a,我们只需要前边的。
另外我们可以在heads中看到百度使用的jsonp参数名为cb，所以需要修改。

sendJsonp(){    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{        params:{            wd:'a'        },        jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改        }).then(resp => {            console.log(resp.data.s);        });}

通过测试，发现可以得到结果

(10) ["爱奇艺", "阿里云", "安居客", "阿里巴巴", "阿里巴巴批发网", "爱奇艺网", "阿里云邮箱", "安卓模拟器", "爱思助手", "acfun"]

文档访问Github的vue-resource项目

另外，我也不怎么建议使用这个跨域，况且也不是经常用到。
可以使用Jquery，document.domain + iframe跨域以及nodejs中间件代理跨域