HTML的自我修养VueVue

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

2017-07-21  本文已影响726人  ChainZhang

本文为转载，原文：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

Parameter Type Description
url string URL to which the request is sent
body Object, FormData, string Data to be sent as the request body
headers Object Headers object to be sent as HTTP request headers
params Object Parameters object to be sent as URL parameters
method string HTTP method (e.g. GET, POST, ...)
responseType string Type of the response body (e.g. text, blob, json, ...)
timeout number Request timeout in milliseconds (0 means no timeout)
before function(request) Callback function to modify the request options before it is sent
progress function(event) Callback function to handle the ProgressEvent of uploads
credentials boolean Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP boolean Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
emulateJSON boolean Send request body as application/x-www-form-urlencoded content type

Response

返回对象的参数以及对象的方法如下：

Property Type Description
url string Response URL origin
body Object, Blob, string Response body
headers Header Response Headers object
ok boolean HTTP status code between 200 and 299
status number HTTP status code of the response
statusText string HTTP status text of the response
Method Type Description
text() Promise Resolves the body as string
json() Promise Resolves the body as parsed JSON object
blob() Promise Resolves the body as Blob object

Example

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

  // 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

我们可以在浏览器中输入上述url测试下是否能成功：



从图中可以看出，返回的对象里，data就是我们的上送的内容，当然你也可以加一些其他的参数，也同样的会返回，只是app_id, method必须是正确的，其他的随便。如下：


既然我们的接口是没有问题的，那么，我们就试试我们的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('请求失败')
      });
    }
  })

保存后，刷新页面，可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据：
请求：


响应：

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: 'zzceng@126.com'
          }
      },{emulateJSON: true}).then(response => {
          console.log('请求成功')
      },
      response => {
          console.log('请求失败')
      });
    }
  })

保存后，刷新页面，可以从控制台看到输出了请求成功字样。然后我们再看下请求和返回的数据：
请求：


响应：

在这里我们看到了陌生的东西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;

完

本文为原创，转载请注明出处

上一节：Vue学习笔记进阶篇——vue-router安装及使用
返回目录
上一节：Vue学习笔记进阶篇——vuex安装及使用

上一篇下一篇

猜你喜欢

热点阅读