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 相关文章推荐
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
用JS实现选项卡
Mar 23 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设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php和html的区别点详细总结
2019/09/24 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Python logging模块学习笔记
2014/05/24 Python
详解python中的装饰器
2018/07/10 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
django有哪些好处和优点
2020/09/01 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
南京某公司笔试题
2013/01/27 面试题
招商专员岗位职责
2014/02/08 职场文书
12月红领巾广播稿
2014/02/13 职场文书
七匹狼男装广告词
2014/03/21 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
回复函范文
2015/07/14 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python