Vue学习笔记进阶篇——vue-resource安装及使用

简介
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。

本文是基于之前的文章(Vue学习笔记进阶篇——vue-cli安装及介绍)vue-cli脚手架工具的。

基本语法
引入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);

以下是一个简单的get使用示例:

// GET /someUrl
  this.$http.get('/someUrl').then(response => {
    // success callback
  }, response => {
    // error callback
  });

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])

options
Vue学习笔记进阶篇——vue-resource安装及使用_第1张图片
Response
返回对象的参数以及对象的方法如下:
Vue学习笔记进阶篇——vue-resource安装及使用_第2张图片

Example
简单的post提交

{
  // POST /someUrl
  this.$http.post('/someUrl', {foo: 'bar'}).then(response => {
    // get status
    response.status;
    // get status text
    response.statusText;
    // get 'Expires' header
    response.headers.get('Expires');
    // get body data
    this.someData = response.body;
  }, response => {
    // error callback
  });
}

带查询参数和自定义请求头的GET请求

{
// GET /someUrl?foo=bar
this.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {
  // success callback
}, response => {
  // error callback
});
}

获取图片并使用blob()方法从响应中提取图片的主体内容。

// GET /image.jpg
this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {
  // resolve to Blob
  return response.blob();
}).then(blob => {
  // use image Blob
});

安装
在终端通过cd命令进入到之前文章中创建的my-demo1项目目录里,然后使用以下命令进行安装:

npm install vue-resource --save

–save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后, 可以查看package.json文件,你会发现多了"vue-resource": "^1.3.4"的配置。具体如下:

"dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0"
  },

**

使用

**
注册
通过以上步骤,我们已经安装好了vue-resource,但是在vue-cli中我们如何使用呢?
首先,我们需要在main.js文件中导入并注册vue-resource:

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

**

项目中调用

**
在此之前,我用php的laravel框架开发了一些简单的api接口,用以接下来我们的测试。这里我先介绍下,我的api接口的功能:

url: http://api.chairis.cn/api?app_id=123456&method=demo.run params:
app_id: 应用id, 我这边提供了一个测试的id123456 method: 方法名称,我这边提供的测试方法为demo.run
功能:这个方法的功能就比较简单了,就是把上送的参数再返回来而已。

我们可以在浏览器中输入上述url测试下是否能成功:
Vue学习笔记进阶篇——vue-resource安装及使用_第3张图片
从图中可以看出,返回的对象里,data就是我们的上送的内容,当然你也可以加一些其他的参数,也同样的会返回,只是app_id, method必须是正确的,其他的随便。如下:
Vue学习笔记进阶篇——vue-resource安装及使用_第4张图片

既然我们的接口是没有问题的,那么,我们就试试我们的vue-resource的强大功能吧。这里我们就在之前的DemoHome组件里实现我们的测试吧。

get
修改DemoHome组件的javascript标签的代码如下:

export default({
    name:'home',
    mounted:function () {
      this.$http.get('http://api.chairis.cn/api',{
          params:{
            app_id:'123456',
            method:'demo.run',
            name:'chain'
          }
      }).then(response => {
          console.log('请求成功')
      },
      response => {
          console.log('请求失败')
      });
    }
  })

保存后,刷新页面,可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据:
请求:
Vue学习笔记进阶篇——vue-resource安装及使用_第5张图片
响应:
Vue学习笔记进阶篇——vue-resource安装及使用_第6张图片

post
修改DemoHome组件的javascript标签的代码如下:

export default({
    name:'home',
    mounted:function () {
      this.$http.post('http://api.chairis.cn/api?app_id=123456&method=demo.run',{
          body: {
            name: {
              first_name: 'chain',
              last_name: 'zhang'
            },
            email: '[email protected]'
          }
      },{emulateJSON: true}).then(response => {
          console.log('请求成功')
      },
      response => {
          console.log('请求失败')
      });
    }
  })

保存后,刷新页面,可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据:
请求:
Vue学习笔记进阶篇——vue-resource安装及使用_第7张图片
响应:
Vue学习笔记进阶篇——vue-resource安装及使用_第8张图片

在这里我们看到了陌生的东西emulateJSON, 为什么要加这个参数呢,想知道为什么,那么就把他去掉试试,去掉了,你会发现请求失败了,报以下错误:
在这里插入图片描述
这是个跨域请求,没有权限的问题,但是已加上这个熟悉就可以了。那我们就来看看这到底是个什么鬼。

emulateJSON
emulateJSON(布尔值)
默认值为:false,当值为true并且data为对象时,设置请求头Content-Type的值为application/x-www-form-urlencoded。

如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。
而this.$http.post的data默认不是以form data的形式,而是request payload, 所以需要这样设置。
当然,如果你觉得每次的请求都要加这个熟悉很麻烦的话,你也可以使用全局配置,在main.js中注册了vue-resource之后,添加以下代码即可:

Vue.http.options.emulateJSON = true;

另外还有个类似的属性emulateHTTP.

emulateHTTP
emulateHTTP(布尔值)
默认值为:false,当值为true是,用HTTP的POST方式PUT,PATCH,DELETE等请求,并设置请求头字段HTTP_Method_Override为原始请求方法。

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

如果服务器无法处理PUT,PATCH和DELETE的请求。可以启用enulateHTTP。
启用之后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法

Vue.http.options.emulateHTTP = true;

原文:http://www.chairis.cn/blog/article/35

你可能感兴趣的:(vue,vue-resource)