Vue进阶（幺伍肆）：vue-resource 应用_vue-resource

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 方法列表

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

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

除了jsonp以外，另外6种的API名称都是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

• options对象
  发送请求时的options选项对象包含以下属性：
  
• Response
  返回对象的参数以及对象的方法如下：
  

五、示例代码

简单的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
});

六、安装

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)

八、resource 服务应用

vue-resource提供了另外一种方式访问HTTP——resource服务，resource服务包含以下几种默认的action：

• get: {method: 'GET'},
• save: {method: 'POST'},
• query: {method: 'GET'},
• update: {method: 'PUT'},
• remove: {method: 'DELETE'},
• delete: {method: 'DELETE'}

1、resource对象也有两种访问方式：全局访问和局部访问。

//全局访问
Vue.resource
//局部访问
this.$resource

可以结合URI Template一起使用，以下示例的apiUrl都设置为{/id}了：

apiUrl: 'http://22.189.25.95:8080/api/customers{/id}'

{/id}相当于一个占位符，当传入实际的参数时该占位符会被替换。例如，{ id: vm.item.customerId}中的vm.item.customerId为12，那么发送的请求URL为：'http://22.189.25.95:8080/api/customers/12'

2、使用实例

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

[外链图片转存中…(img-AV0vjWO4-1719231368313)]

[外链图片转存中…(img-HBZf6fYp-1719231368315)]