Vue-resource实现ajax请求和跨域请求示例


Posted in Javascript onFebruary 23, 2017

vue-resource是Vue提供的体格http请求插件,如同jQuery里的$.ajax,用来和后端交互数据的。

在使用时,首先需要安装vue-resource插件

1.在项目跟目录上安装:

npm install vue-resource

 2.引入resource插件

import VueResource from 'vue-resource'; 
Vue.use(VueResource)

3.发送请求:

this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
  console.log(res) 
 })

ES6写法:

this.$http.get('url', [options]).then((res) => { 
// 处理成功的结果}, (res) => { // 处理失败的结果});

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法,第一种是传统的函数写法,第二种是更为简洁的ES 6的Lambda写法:

POST请求:

this.$http.post("http://www.vrserver.applinzi.com/aixianfeng/apihome.php",{name:"abc"},{emulateJSON:true}).then( 
   function (res) { 
    // 处理成功的结果 
    alert(res.body); 
   },function (res) { 
   // 处理失败的结果 
   } 
  );

JSONP请求:

new Vue({ ready() { 
 this.$http.jsonp('/url', {name:"abc"}) .then(function (res){ 
  console.log(res) 
 }, function (res) { 
  console.log(res) 
  }); 
 } 
})

吐槽一下,现在应该没有用到JSON的了吧,有的话真呵呵呵了。

支持的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时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。

客户端请求方法 服务端处理方法
this.$http.get(...) Getxxx
this.$http.post(...) Postxxx
this.$http.put(...) Putxxx
this.$http.delete(...) Deletexxx

options对象

发送请求时的options选项对象包含以下属性:

参数 类型 描述
url string 请求的URL
method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
body Object, FormDatastring request body
params Object 请求的URL参数对象
headers Object request header
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credientials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

response对象

response对象包含以下属性:

方法 类型 描述
text() string 以string形式返回response body
json() Object 以JSON对象形式返回response body
blob() Blob 以二进制形式返回response body
属性 类型 描述
ok boolean 响应的HTTP状态码在200~299之间时,该属性为true
status number 响应的HTTP状态码
statusText string 响应的状态文本
headers Object 响应头

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
You might like
短波问题解答
2021/02/28 无线电
php实现图片添加水印功能
2014/02/13 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
srcElement表格样式
2006/09/03 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
pyenv命令管理多个Python版本
2017/03/26 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
python中如何设置代码自动提示
2020/07/15 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
校园十大歌手策划书
2014/02/01 职场文书
劳模先进事迹材料
2014/12/24 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS