Vue-resource实现ajax请求和跨域请求示例

vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。

在使用时，首先需要安装vue-resource插件

1.在项目跟目录上安装：

npm install vue-resource 

 2.引入resource插件

import VueResource from 'vue-resource';
Vue.use(VueResource) 

3.发送请求：

this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){
  console.log(res)
 }) 

ES6写法：

this.$http.get('url', [options]).then((res) => {
// 处理成功的结果}, (res) => { // 处理失败的结果}); 

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

POST请求：

this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.php",{name:"abc"},{emulateJSON:true}).then(
   function (res) {
    // 处理成功的结果
    alert(res.body);
   },function (res) {
   // 处理失败的结果
   }
  );

JSONP请求：

new Vue({ ready() {
 this.$http.jsonp('/url', {name:"abc"}) .then(function (res){
  console.log(res)
 }, function (res) {
  console.log(res)
  });
 }
})

吐槽一下，现在应该没有用到JSON的了吧，有的话真呵呵呵了。

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

options对象

发送请求时的options选项对象包含以下属性：