vue-resource HTTP API基础
vue-resource特点
vue-resource插件具有以下特点:
1. 体积小
vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。
vue-resource使用
引入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
HTTP
The http service can be used globally Vue.http
or in a Vue instance
this.$http
.
Usage
A Vue instance provides the this.$http
service which can send HTTP requests. A request method call returns a
Promise that resolves to the response. Also the Vue instance will be automatically bound to
this
in all function callbacks.
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
}
Methods
Shortcut methods are available for all request types. These methods work globally or in a Vue instance.
// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
List of shortcut methods:
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
A request resolves to a response object with the following properties and methods:
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
});
}
Fetch an image and use the blob() method to extract the image body content from the response.
{
// GET /image.jpg
this.$http.get('/image.jpg').then(response => { // resolve to Blob
return response.blob(); }).then(blob => {
// use image Blob
});
}
Interceptors
Interceptors can be defined globally and are used for pre- and postprocessing of a request. If a request is send using
this.$http
or this.$resource
the current Vue instance is available as
this
in a interceptor callback.
Request processing
Vue.http.interceptors.push(function(request, next) { // modify method
request.method = 'POST'; // modify headers
request.headers.set('X-CSRF-TOKEN', 'TOKEN');
request.headers.set('Authorization', 'Bearer TOKEN'); // continue to next interceptor
next();
});
Request and Response processing
Vue.http.interceptors.push(function(request, next) { // modify request
request.method = 'POST'; // continue to next interceptor
next(function(response) { // modify response
response.body = '...'; });
});
Return a Response and stop processing
Vue.http.interceptors.push(function(request, next) { // modify request ... // stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});
vue-resource HTTP API基础的更多相关文章
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- 了解 Vue 的 Compsition API
在这篇文章中,我将讲讲 Vue 的 Composition API 为什么比之前的 Options API 要好,以及它是如何工作的. Options API 有什么问题 首先,这里不是要大家放弃 O ...
- 从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码
前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...
- 《Node.js高级编程》之Node 核心API基础
Node 核心API基础 第三章 加载模块 第四章 应用缓冲区 第五章 事件发射器模式简化事件绑定 第六章 使用定时器制定函数执行计划 第三章 加载模块 本章提要 加载模块 创建模块 使用node_m ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载. ht ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
随机推荐
- Android file内部存储
通过file=openFileOutput()获得,将数据存储在data/data/+包名+files下面. 代码如下: MainActivity.java: import android.os.Bu ...
- 77.Q表达式详解
Q表达式可以包裹查询条件,可以在多个条件之间进行操作:与或非等.Q表达式一般会放在filter()中进行使用,F表达式一般是放在update()中进行使用. 定义模型的models.py文件中,示例代 ...
- Ajax校验用户名是否可用
准备 导包:DBUtil,JDBC,C3P0 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 第2.3.条查看https://blog.csdn.net/weixin_ ...
- linux 用户与文件常用命令
用户与文件 su :切换到超级用户 su - l chesney : 切换到chesney用户 sudo usermod -G sudo -a chesney:把chesney 加入到sudo组 su ...
- 吴裕雄--天生自然TensorFlow2教程:合并与分割
import tensorflow as tf # 6个班级的学生分数情况 a = tf.ones([4, 35, 8]) b = tf.ones([2, 35, 8]) c = tf.concat( ...
- vnpy交易接口学习
1.按照github中环境准备要求,配置好环境要求. https://github.com/vnpy/vnpy mongdb安装在D:\Program Files\MongoDB\Server\3.4 ...
- Cordova搭建环境与问题小结
1.Cordova介绍: Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头.加速计.它可以与UI框架(如jQuery Mobi ...
- sendmail 的安装、配置与发送邮件的具体实现
Ubuntu 中sendmail 的安装.配置与发送邮件的具体实现 centos安装sendmail与使用详解 CentOS下搭建Sendmail邮件服务器 使用外部SMTP发送邮件 使用mailx ...
- 关于mysql/apache/nginx的配置文件配置
2015.5.12 mysql中可以通过函数查看用户列表/查看当前用户以及删除用户,方法百度之,忘了 /etc/php5/fpm/php.ini memory_limit修改之前为128M apach ...
- 监听配置问题,SID与Service_Name区别
监听配置问题,SID与Service_Name区别 1.数据库实例名SID 概念:数据库实例名用于和操作系统进行联系的标识,是数据库和操作系统之间的交互用的书数据库实例名.实例名也被写入参数文件中,该 ...