前端框架Vue学习08——vue-resource基本使用

Vue-resource发起请求，实现get、post、jsonp请求。
Vue-resource的介绍如下

来自：点这里看vue-resource
大佬解释的已经够清楚了，我以菜鸟的角度来学习以下。

安装

官网：https://www.npmjs.com/package/vue-resource ，两种安装方式。
1、npm i vue-resource 或者 yarn add vue-resource这种方式好像已经不支持了
2、引入，vue-resource 依赖于vue ，vue-rescorce在vue之后。

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

get请求

以一个vue实例为例

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);

通过this.$http来发起数据请求，someUrl即接口地址，[config]为可选项，在文档中有专门的介绍。通过.then指定回调函数，在回调函数中，第一个是响应成功的，第二个是响应失败的。
两种写法
第一种：

this.$http.get('http://jsonplaceholder.typicode.com/posts')
.then(function(result){
// 通过result.body 拿到服务器返回的成功数据
 console.log(result.body)
})

第二种：

this.$http.post('https://jsonplaceholder.typicode.com/posts',{},{ emulateJSON: true })
.then(result => {
 console.log(result.body)
})

post请求

与get请求类似，

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

三个参数，第一个参数是url地址，第二个参数是根据接口文档提交的数据内容，第三个是提交的格式。
代码演示：

this.$http.post('https://jsonplaceholder.typicode.com/posts',{},{ emulateJSON: true }).then(result => {
  console.log(result.body)
})

jsonp请求

jsonp的实现原理，由于浏览器的安全性限制，不允许Ajax访问，协议不同，域名不同，端口号不同的数据接口。浏览器认为这种访问不安全。可以通过动态创建script标签的形式，把scrip标签的src属性，指向数据接口的地址，因为script不存在跨域限制，这种数据获取方式称之为JSONP。（JSONP只支持Get请求）