使用vue-resource库发送请求获取数据

大家一定知道，在jquery中，我们使用$.ajax()方法，来发送请求获取数据，

在vue中，我们使用vue-resource或者axios来向接口发送请求，获取数据，官方推荐使用axios,其实用法差不多。

这里我们先介绍vue-resource库：

vue-resource的特点：

1.体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2.支持主流的浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3.支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue-resource的使用

引入vue-resource

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

基本语法

引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。我们发现其实vue中特性：很多功能，在实例中可以使用，全局对象也可以直接定义。

示例：
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

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

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

示例：
// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});


// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
	// 注意：函数表达式简写形式，但是其中this指向发生变化，此时，执行vue实例,上面传统写法指向window对象
}, (response) => {
    // 响应错误回调
});

支持的HTTP方法

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

介绍三种常用的，get请求，post请求，jsonp跨域

var vm = new Vue({
      el: '#app',
      data: {
        list: []
      },

      // 在 created 钩子函数中，可以调用data和methods, getData 方法，获取数据
      // 因为这个钩子函数，会在vue创建阶段调用，所以，我们直接在这个方法中调用
      // this.getData 方法即可
      created() {
        // 发送 get 请求
        this.getData()

        // 发送 post 请求
        this.postData()

        // 发送 JSONP 请求
        this.jsonpData()
      },

      methods: {
        getData() {
          // console.log(this.$http);

          // 发送 get 请求
          this.$http.get('http://vue.studyit.io/api/getnewslist')
            .then(resp => {
              console.log(resp.body);

              this.list = resp.body.message
            })
            .catch(err => {
              console.log(err);
            })
        },

        postData() {
          // this.$http.post()
          var url = 'http://vue.studyit.io/api/postcomment/17'

          // 第一个参数：表示请求的接口地址
          // 第二个参数：表示提交给接口的数据
          // 第三个参数：请求的配置对象，如果是post请求，需要将 emulateJSON 设置为true
          this.$http.post(url, {
            content: '完美！'
          }, {
              emulateJSON: true
            })
            .then(resp => {
              console.log(resp.body);
            })
        },

        jsonpData() {
          var url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&&timestamp=' + (new Date() - 0)
          this.$http.jsonp(url)
            .then(data => {
              console.log(data.body);
            })
        }
      }
})

options对象

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

参数	类型	描述
url	`string`	请求的URL
method	`string`	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	`Object`,FormData``string	request body
params	`Object`	请求的URL参数对象
headers	`Object`	request header
timeout	`number`	单位为毫秒的请求超时时间 (`0` 表示无超时时间)
before	`function(request)`	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	`function(event)`	ProgressEvent回调处理函数
credientials	`boolean`	表示跨域请求时是否需要使用凭证
emulateHTTP	`boolean`	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的`X-HTTP-Method-Override`
emulateJSON	`boolean`	将request body以`application/x-www-form-urlencoded` content type发送

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

response对象

response对象包含以下属性：

方法	类型	描述
text()	`string`	以string形式返回response body
json()	`Object`	以JSON对象形式返回response body
blob()	`Blob`	以二进制形式返回response body
属性	类型	描述
ok	`boolean`	响应的HTTP状态码在200~299之间时，该属性为true
status	`number`	响应的HTTP状态码
statusText	`string`	响应的状态文本
headers	`Object`	响应头

注意：本文的vue-resource版本为v0.9.3，如果你使用的是v0.9.0以前的版本，response对象是没有json(), blob(), text()这些方法的。

介绍一个博客：神人博客，知识点很全

链接：http://blog.csdn.net/sinat_17775997/article/details/52549084?locationNum=6&fps=1

来源：oschina

链接：https://my.oschina.net/u/3495544/blog/1553721

标签

vue

vue-resource