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 相关文章推荐
JS高级笔记
Jul 13 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Element Card 卡片的具体使用
Jul 26 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php操作xml
2013/10/27 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
理解Koa2中的async&await的用法
2018/02/05 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python关于变量名的基础知识点
2020/03/03 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
python switch 实现多分支选择功能
2020/12/21 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
建筑个人求职信范文
2014/01/25 职场文书
体育之星事迹材料
2014/05/11 职场文书
团委工作总结2015
2015/04/02 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Html5调用企业微信的实现
2021/04/16 HTML / CSS
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL