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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
js loading加载效果实现代码
Nov 24 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
深入掌握 react的 setState的工作机制
Sep 27 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue实现多级菜单效果
Oct 19 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邮件类
2007/01/03 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php计算title标题相似比的方法
2015/07/29 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
JavaScript如何自定义trim方法
2015/07/28 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
js实现微信分享代码
2020/10/11 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
python:socket传输大文件示例
2017/01/18 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Django如何将URL映射到视图
2019/07/29 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python实现简单俄罗斯方块
2020/03/13 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
房地产营销策划方案
2014/02/08 职场文书
商务经理岗位职责
2014/08/03 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
优秀团队申报材料
2014/12/26 职场文书
岳庙导游词
2015/02/04 职场文书
运动会致辞稿
2015/07/29 职场文书
工程移交协议书
2016/03/24 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书