详解vue前后台数据交互vue-resource文档

底层方法

全局的Vue.http方法和Vue组件的实例方法this.$http都属于底层方法，他们根据所传入option惨啊书的method属性来判断请求方式是GET还是POST，亦或是其它的HTTP的合法方法。

全局调用

Vue.http(option);

组件实例调用

this.$http(option)

全局调用和组件实例调用都是接收相同的option参数。都返回Promise对象。不同的是，全局方式回调this指向window，而组建实例调用方式回调指向组件实例。

组件实例方式发送POST请求

new Vue({
  ready: function () {
    // POST请求
    this.$http({
      url: '',
      method: 'POST',
      // 请求体重发送的数据
      data: {
        cat: 1
      },
      // 设置请求头
      headers: {
        'Content-Type': 'x-www-from-urlencoded'
      }
    }).then(function () {
      // 请求成功回调
    }, function () {
      // 请求失败回调
    });
  }
});

便捷方法

不同于底层方法，便捷方法是对底层方法的封装，在调用时可以省去配置选项option中的method属性。

vue-resource 提供的便捷方法：

get(url, [data], [options]);
post(url, [data], [options]);
put(url, [data], [options]);
patch(url, [data], [options]);
delete(url, [data], [options]);
jsonp(url, [data], [options]);

都是接受三个参数：

url（字符串），请求地址。可被options对象中url属性覆盖。
data（可选，字符串或对象），要发送的数据，可被options对象中的data属性覆盖。
options

便捷方法的POST请求：

this.$http.post(
  'http://example.com',
  // 请求体重发送数据给服务端
  {
    cat: 1,
    name: 'newBook'
  },{
    'headers': {
      'Content-Type': 'x-www-form-urlencoded'
    }
  }).then(function () {
    // 成功回调
  }, function () {
    // 失败回调
  });

请求选项对象

option对象的各属性及含义