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基础的更多相关文章

  1. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  2. 了解 Vue 的 Compsition API

    在这篇文章中,我将讲讲 Vue 的 Composition API 为什么比之前的 Options API 要好,以及它是如何工作的. Options API 有什么问题 首先,这里不是要大家放弃 O ...

  3. 从头编写 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的相 ...

  4. 【转载】从头编写 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的相 ...

  5. 从头编写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 基础框架: 第 ...

  6. 《Node.js高级编程》之Node 核心API基础

    Node 核心API基础 第三章 加载模块 第四章 应用缓冲区 第五章 事件发射器模式简化事件绑定 第六章 使用定时器制定函数执行计划 第三章 加载模块 本章提要 加载模块 创建模块 使用node_m ...

  7. Vue 2.0入门基础知识之内部指令

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...

  8. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  9. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载. ht ...

  10. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

随机推荐

  1. Android file内部存储

    通过file=openFileOutput()获得,将数据存储在data/data/+包名+files下面. 代码如下: MainActivity.java: import android.os.Bu ...

  2. 77.Q表达式详解

    Q表达式可以包裹查询条件,可以在多个条件之间进行操作:与或非等.Q表达式一般会放在filter()中进行使用,F表达式一般是放在update()中进行使用. 定义模型的models.py文件中,示例代 ...

  3. Ajax校验用户名是否可用

    准备 导包:DBUtil,JDBC,C3P0 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 第2.3.条查看https://blog.csdn.net/weixin_ ...

  4. linux 用户与文件常用命令

    用户与文件 su :切换到超级用户 su - l chesney : 切换到chesney用户 sudo usermod -G sudo -a chesney:把chesney 加入到sudo组 su ...

  5. 吴裕雄--天生自然TensorFlow2教程:合并与分割

    import tensorflow as tf # 6个班级的学生分数情况 a = tf.ones([4, 35, 8]) b = tf.ones([2, 35, 8]) c = tf.concat( ...

  6. vnpy交易接口学习

    1.按照github中环境准备要求,配置好环境要求. https://github.com/vnpy/vnpy mongdb安装在D:\Program Files\MongoDB\Server\3.4 ...

  7. Cordova搭建环境与问题小结

    1.Cordova介绍: Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头.加速计.它可以与UI框架(如jQuery Mobi ...

  8. sendmail 的安装、配置与发送邮件的具体实现

    Ubuntu 中sendmail 的安装.配置与发送邮件的具体实现 centos安装sendmail与使用详解 CentOS下搭建Sendmail邮件服务器 使用外部SMTP发送邮件  使用mailx ...

  9. 关于mysql/apache/nginx的配置文件配置

    2015.5.12 mysql中可以通过函数查看用户列表/查看当前用户以及删除用户,方法百度之,忘了 /etc/php5/fpm/php.ini memory_limit修改之前为128M apach ...

  10. 监听配置问题,SID与Service_Name区别

    监听配置问题,SID与Service_Name区别 1.数据库实例名SID 概念:数据库实例名用于和操作系统进行联系的标识,是数据库和操作系统之间的交互用的书数据库实例名.实例名也被写入参数文件中,该 ...