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 相关文章推荐
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
Javascript----文件操作
2007/01/18 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
javascript实现计算器功能
2020/03/30 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
django表单实现下拉框的示例讲解
2018/05/29 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
土木工程求职信
2014/05/29 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android