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

使用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