vue-resource 很不幸，Vue官方已不再维护这个库了

在Vue中实现异步加载需要使用到vue-resource库，利用该库发送ajax。
该库可以使用jsonp
文档：github-vue-resource

引入vue-resource 该库依赖于Vue

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

引入vue-resource之后，在Vue的全局上会挂载一个$http方法，在vm.$http方法上有一系列方法，每个HTTP请求类型都有一个对应的方法。
vue-resource使用了promise，所以$http中的方法的返回值是一个promise。

请求方法

POST请求

提交数据
使用方法：vm.$http.post(url, [body], [options])

• url: 必需，请求目标url
• body: 非必需，作为请求体发送的数据
• options：非必需，作为请求体发送的数据

  this.$http.post('https://developer.duyiedu.com/vue/setUserInfo', {
    name: this.name,
    mail: this.mail
  })
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  })

  GET请求

  获取数据
  使用方法：vm.$http.get(url, [options])

  this.$http.get('https://developer.duyiedu.com/vue/getUserInfo')
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  })

  使用get时传参

  this.$http.get('https://developer.duyiedu.com/vue/getUserInfo'， {
  params: {
    id: 'xxx'
  }
  })
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  })

  PUT请求

  更新数据，将所有的数据全都推送到后端
  使用方法：vm.$http.put(url, [body], [config])

  PATCH请求

  更新数据，只将修改的数据全都推送到后端
  使用方法：vm.$http.patch(url, [body], [config])

  DELETE请求

  删除数据
  使用方法：vm.$http.delete(url, [config])

  HEAD请求

  请求头部信息
  使用方法：vm.$http.head(url, [config])

  JSONP请求

  除了jsonp以外，以上6种的API名称是标准的HTTP方法。
  使用方法：vm.$http.jsonp(url, [options]); ```javascript this.$http.jsonp(‘https://developer.duyiedu.com/vue/jsonp').then(res => { this.msg = res.bodyText; });

this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘, { params: { wd: ‘nn’, }, jsonp: ‘cd’, //jsonp默认是callback,百度缩写成了cb，所以需要指定下 }) .then(res => { console.log(res); })

<a name="56af9ceb"></a>
## options 参数说明
| 参数 | 类型 | 描述 |
| :---: | :---: | :---: |
| url | String | 请求目标url |
| body | Object, FormData, string | 作为请求体发送的数据 |
| headers | Object | 作为请求头部发送的头部对象 |
| params | Object | 作为URL参数的参数对象 |
| method | String | HTTP方法 (例如GET，POST，...) |
| responseType | String | 设置返回数据的类型 |
| timeout | Number | 在请求发送之前修改请求的回调函数 |
| credentials | Boolean | 是否需要出示用于跨站点请求的凭据 |
| emulateHTTP | Boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |
| emulateJSON | Boolean | 设置请求体的类型为application/x-www-form-urlencoded |
| before | function(request) | 在请求发送之前修改请求的回调函数 |
| uploadProgress | function(event) | 用于处理上传进度的回调函数 |
| downloadProgress | function(event) | 用于处理下载进度的回调函数 |
<a name="246f1981"></a>
## 响应对象
通过如下属性和方法处理一个请求获取到的响应对象：
<a name="24d67862"></a>
### 属性
| 属性 | 类型 | 描述 |
| :---: | :---: | :---: |
| url | String | 响应的 URL 源 |
| body | Object, Blob, string | 响应体数据 |
| headers | Header | 请求头部对象 |
| ok | Boolean | 当 HTTP 响应码为 200 到 299 之间的数值时该值为 true |
| status | Number | HTTP 响应码 |
| statusText | String | HTTP 响应状态 |
<a name="ea340b9d"></a>
### 方法
| 方法 | 描述 |
| :---: | :---: |
| text() | 以字符串方式返回响应体 |
| json() | 以格式化后的 json 对象方式返回响应体 |
| blob() | 以二进制 Blob 对象方式返回响应体 |
以json()为例：
```javascript
this.$http.get('https://developer.duyiedu.com/vue/getUserInfo')
  .then(res => {
    return res.json();
  })
  .then(res => {
    console.log(res);
  })