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

---

一、前言

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

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：

1. 使用Vue.http或this.$http
2. 使用Vue.resource或this.$resource

这两种方式本质上没有什么区别，阅读vue-resource的源码可以得知，第2种方式其实是基于第1种方式实现的。

此外，vue-resource还提供了拦截器：inteceptor可以在请求前和请求后附加一些行为，这意味着除了请求处理的过程，请求的其他环节都可以由我们来控制。

在Vue.js中，完成ajax请求的方式有两种：vue-resource和 axios。

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。有关 axios应用详参博文：

二、vue-resource 特点

• 体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
• 支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE9以下的浏览器，其他主流的浏览器都支持;
• 支持Promise API和URI Templates：Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
  URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板;
• 支持拦截器：拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。 拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共用的处理方式。有关拦截器的具体应用，详参《Vue进阶（幺伍伍）：vue-resource 拦截器interceptors使用》。

三、基本语法

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

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"
  },

七、应用

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）