=> 简要概述 <=
1、在Vue 1.0版本的时候,官方推荐使用vue-resource进行发送请求;
2、新版本Vue 2.0推行后,官方改用axios发送请求;
3、在Vue2.0内,vue-resource可以照常使用没有问题;
4、axios不支持跨域;
5、vue-resource支持跨域;
下面介绍如何使用vue-resource进行跨域。
什么是跨域?这个问题我就不讲解了,CSDN上找了份参考文档,讲的还不错,可以看一看。=>我是传送门
一、安装vue-resource并引入
cnpm install vue-resource -S
二、放置简单的按钮
<button @click="sendJSONP">向360搜索发送JSONP跨域请求</button>
<button @click="sendJSONP2">向百度搜索发送JSONP请求</button>
三、编写点击事件方法,向360和百度发送查询请求
sendJSONP() {
this.$http.jsonp('https://sug.so.360.cn/suggest', {
params: {
word: 'a'
}
}).then(resp = > {
console.log(resp.data.s);
})
},
sendJSONP2() {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: 'a'
},
jsonp: 'cb' //百度使用的jsonp参数名为cb,所以需要修改
}).then(resp = > {
console.log(resp.data.s);
});
}
四、基本用法:
使用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])