目录：
- Vue-resource介绍
- 基本用法
- 用vue-resource发送jsonp请求
一、Vue-resource介绍
使用Vue-resource发送跨域请求，安装vue-resource并引入
cnpm install vue-resource -S
或者自己手动下载vue-resource.min.js
Vue-resouce其实跟axios是一样的，但是官方建议使用axios，但是大部分公司还在用vue-resouce，因为axios不支持 jsonp跨域请求，但是vue-resource支持的。
我们查看一下 vue-resource的github的官方地址：Github官方地址(这个里面有很详细的vue-resource的使用方法)，也可以在 百度文本框: GitHub vue-resource。
如图：
二、基本用法
使用this.$http发送请求
this.$http.get(url, [config]) this.$http.head(url, [config]) this.$http.delete(url, [config]) this.$http.jsonp(url, [config]) this.$http.post(url, [body], [config]) this.$http.put(url, [body], [config]) this.$http.patch(url, [body], [config])
详细使用方法，请查看官网：vue-ressource官方使用文档
三、用vue-resource发送jsonp请求
2.1、语法
说明：当你引入vue-resource是，则vue实例对象中$http，其实这个$http就是指的是vue-resource
this.$http.jsonp("跨域请求的URL",{
params:{
word:'shuaigaogao', //请求参数
}
}).then(resp => {
console.log(resp.body.s); //请求成功
}).catch(err => {
console.log(err ); //请求失败
}).then(function() {
console.log("不管怎么样都要执行"); //相当于 finally
});
2.2、模拟360搜索关键字
说明：这个是通过抓包的方式获取360搜索接口
<body>
<div id="box">
<button @click="sendJsonp">发送jsonp请求</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<!--引入vue-resource-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
new Vue({
el:"#box",
methods:{
sendJsonp(){
this.$http.jsonp("https://sug.so.360.cn/suggest",{ //请求360搜索接口，是通过抓包获取的
params:{
word:'huawei',
}
}).then(resp => { //请求成功
console.log(resp.body.s);
})
}
}
})
</script>
</body>
输出结果，如下：
2.3、模拟百度搜索服关键字
jsonp: 'cb' => 修改jsonp的参数名称，把callback改为cb。
<body>
<div id="box">
<button @click="sendJsonp">发送jsonp请求</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
new Vue({
el:"#box",
methods:{
sendJsonp(){
this.$http.jsonp("https://sp0.baidu.com/5b1ZeDe5KgQFm2e88IuM_a",{
params:{
wd:'huawei',
},
jsonp: 'cb' //百度使用时jsonp参数名改为cb，所以需要修改
}).then(resp => {
console.log(resp);
});
}
}
})
</script>
</body>