Vue-Resource简述
一如往常,学习怎么用之前必须了解这是个什么东西
Vue-Resource简介
- vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应,也就是说,$.ajax可以做的事情,vue-resource插件也一样能够做到,并且vue-resource的API更为简洁。
- vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,例如可以使用inteceptor在ajax请求时显示loading界面
Vue-Resource特点
- 体积小
vue-resource非常小,在压缩之后只有大约12KB,服务启用gzip压缩后只有4.5KB大小,远比jQuery的体积要小得多。 - 支持主流浏览器
和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器外,其他的主流浏览器它都支持 - 支持Promise API和URI Templates
Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算
URI Templates是URI的模板,有些类似于ASP.NET MVC的路由模板 - 支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理
拦截器在一些场景下非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供通用的处理方式
Vue-Resource使用
准备工作
- 使用命令创建vue-cli工程项目,使用webstorm打开
为编写代码时有合适的提示,需要在setting里配置一下
- 安装vue-resource
推荐去看vue-resource 的git仓库里的ReadMe文档学习使用 Vue-resource git仓库
这里使用–save只进行本地安装
package.json文件里的dependencies里可以看到
开始造
- main.js中引入并使用
- mock数据:模拟服务端的资源,这里通过json-server来模拟数据
JSON-Server是一个Node模块,运行Express服务器,我们可以指定一个json文件作为数据源,可以把它理解为模拟了一个底层数据库
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并且支持跨域、jsonp、路由订制、数据快照保存等功能的web服务器
json-server git仓库(含入门操作)
首先,全局安装json-server
创建文件db.json模拟数据
数据模拟后,使用命令进行启动
出现笑脸即为启动成功了
我们使用postMan进行请求数据测试一下
可以看到获取到了我们在db.json中编写的数据 - App.vue中使用vue-resource进行请求
通过火狐浏览器的Vue.js devtools插件进行查看数据
post、delete、put请求就是相应的将$http后的关键字进行更改。