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

数据获取 vue-resource

• vue-resource
• axios

单来讲，vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。能够放在created或者ready里面运行来获取或者更新数据... ###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的路由模板。
4. 支持拦截器 拦截器是全局的，拦截器能够在请求发送前和发送请求后作一些处理。拦截器在一些场景下会很是有用，好比请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。 ###vue-resource使用

1.引入vue-resource

####基本语法

• 引入vue-resource后，能够基于全局的Vue对象使用http，也能够基于某个Vue实例使用http。

// 基于全局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方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

GET

• 说明：发送JSONP的方式与get请求相同

const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
  .then(data => {
    console.log(data)
    console.log(data.body)
  })
复制代码

POST

// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
  content: '完美！'
}, {
  emulateJSON: true
})
  .then(data => {
    console.log(data.body);
  })
复制代码

JSONP

const 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);
  })
复制代码