vue的vue-resource和axios介绍_vue-resuorce-程序员宅基地

技术标签: VUE  前端  vue.js  javascript  

在Vue项目中前后端交互时,早期Vue使用Vue-resource实现异步请求。

从Vue2.0之后就不再对vue-resource进行更新,Vue官方推荐使用axios。

一、vue-resource

Vue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。vue-resource像jQuery的$,ajax,用来进行数据交互。主要用于发送ajax请求。

特点:

  1.体积小,压缩后约12kb
  2.支持主流浏览器(除IE9以下)
  3.支持Promiss API 和 URL Templates
  4.支持拦截器,可全局设置拦截器,可以在请求发送前和发送请求后做一些事情。

语法 & API:

以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

使用vue-resource发送跨域请求

1.安装vue-resource并引入

cnpm install vue-resource -S

2.基本用法

使用this.$http发送请求  

this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options]) 

3.相关文章推荐

vue-resource: The HTTP client for Vue.js

https://www.cnblogs.com/zhaoxiaoying/p/11950567.html【本文部分内容,摘录此文章】

https://www.cnblogs.com/wspblog/p/9844986.html【本文部分内容,摘录此文章】

vue.resource是什么-Vue.js-PHP中文网

Vue.js Ajax(vue-resource) | 菜鸟教程

Vue——Vue-resource详解-程序员宅基地

二、axios

特点:
  1.在浏览器中发送XMLHttpRequests请求
  2.在node.js中发送http请求
  3.支持Promiss API( 依赖原生的 ES6 Promise,如果你的环境不支持 ES6 Promise,可以使用 polyfill。 )
  4.可创建实例
  5.拦截器请求和响应
  6.转换请求和响应数据
  7.并发请求
  8.取消请求
  9.自动转换JSON数据
  10.客户端支持保护安全免受CSRF/XSRF攻击

1. 安装axios并引入

npm install axios -S

也可直接下载axios.min.js文件

2.基本用法

axios([options])  
axios.get(url[,options]);

传参方式:

1.通过url传参

2.通过params选项传参

axios.post(url,data,[options]);

axios默认发送数据时,

数据格式是Request Payload,

并非我们常用的Form Data格式,

所以参数必须要以键值对形式传递,不能以json形式传参 传参方式:

1.自己拼接为键值对

2.使用transformRequest,在请求发送前将请求数据进行转换

3.如果使用模块化开发,可以使用qs模块进行转换

例如这样传参:

username=renping&password=123456

 

axios.post(
'http://jjy.cheng.com/',
'username=renping&password=123456').then((res) => {
console.log('请求到的数据===',res);
});

可参考下面文章:vue 在使用post提交json数据、表单数据,object数据,解决方案_vue项目提交请求,数据为表单数据-程序员宅基地

 3.相关文章推荐

https://www.cnblogs.com/zhaoxiaoying/p/11950567.html【本文部分内容,摘录此文章】

https://www.cnblogs.com/wspblog/p/9844986.html【本文部分内容,摘录此文章】

Vue.js Ajax(axios) | 菜鸟教程

Vue.js Ajax(vue-resource) | 菜鸟教程

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cplvfx/article/details/135749831

智能推荐

Vista/Win7下普通权限进程动态提升权限_findwindow 没有权限-程序员宅基地

文章浏览阅读2k次。本文出自 “碧海笙箫” 博客,请务必保留此出处http://pyhcx.blog.51cto.com/713166/197073一、前提在Vista/Win7下,加强了对安全的管理,对注册表修改,系统目录的文件操作,都需要管理员权限才能完成(当然虚拟存储机制,表面上也相当于能操作)。所以,对于程序中有相关操作的,这时候,就要求我们的程序必须拥有管理员权限。通过mainfest文件,我们可以让程序总是需要管理员权限执行,但是,这将导致程序每次运行时,都需要弹出UAC框老骚扰用户,另外,有时候我们的程序只是在某_findwindow 没有权限

PCS7 入门指南 v9.0 SP3 v9.1 中文版 学习资料 (官方公开可用资料)_pcs7v9.1-程序员宅基地

文章浏览阅读1.8w次,点赞13次,收藏82次。链接:https://pan.baidu.com/s/1-p4h_QDL8BN04tnn3vSkOA提取码:nou3PCS7入门指南v9.0含APL(包含PDF和项目文件)官方地址:SIMATIC 过程控制系统 PCS 7 入门指南第1部分 (V9.0,含APL)https://support.industry.siemens.com/cs/document/109756196/simatic-%E8%BF%87%E7%A8%8B%E6%8E%A7%E5%88%B6%E7%B3%BB..._pcs7v9.1

c# 调用非托管代码_c# 声明kernel32 函数-程序员宅基地

文章浏览阅读956次,点赞3次,收藏5次。编程过程中,一般c#调用非托管的代码有两种方式:1.直接调用从DLL中导出的函数。2.调用COM对象上的接口方法。首先说明第1种方式,基本步骤如下:1.使用关键字static,extern声明需要导出的函数。2.把DllImport 属性附加到函数上。3.掌握常用的数据类型传递的对应关系。4.如果需要,为函数的参数和返回值指定自定义数据封送处理信息,这将重写.net framework默认的封送处理。简单举例如下:托管函数原型:DWORD GetShortPathName(LPCTST_c# 声明kernel32 函数

高频交易及化资策与区_hudson river trading-程序员宅基地

文章浏览阅读406次。转 高频交易及量化投资的策略与误区一、高频交易公司和量化投资公司的区别一般来说,高频交易公司和量化投资公司既有联系,又有区别。在美国,人们常说的高频交易公司一般都是自营交易公司,这些公司主要有Getco、Tower Research、Hudson River Trading、SIG、Virtu Financial、Jump Trading、RGM Advisor、Chopper Tradi..._hudson river trading

C语言文件操作相关的函数_c语言与文件处理有关的函数-程序员宅基地

文章浏览阅读865次。文件的打开和关闭文件在读写之前应该先打开文件,在使用结束之后应该关闭文件。在编写程序的时候,在打开文件的同时,都会返回一个FILE*的指针变量指向该文件,也相当于建立了指针和文件 的关系。ANSIC 规定使用fopen函数来打开文件,fclose来关闭文件。FILE * fopen ( const char * filename, const char * mode ); int fcl..._c语言与文件处理有关的函数

java 无法读取文件_java 读取文件,无法显示文件内容,如何解决? 谢谢。-程序员宅基地

文章浏览阅读1.1k次。从来没见过进行文件读取写入时,在写入中需要随机数的,你读取文件就是从一个地方获取输入流,然后将这个输入流写到别的地方,根本不要随机数。给你一个示例://copyafiletoanotherfilebyusingFileReader/FileWriterimportjava.io.*;publicclassTFileRead{publicstaticvoidmain(S..._java复制文件文件没有内容显示

随便推点

优化算法——拟牛顿法之BFGS算法-程序员宅基地

文章浏览阅读6.2w次,点赞25次,收藏188次。一、BFGS算法简介 BFGS算法是使用较多的一种拟牛顿方法,是由Broyden,Fletcher,Goldfarb,Shanno四个人分别提出的,故称为BFGS校正。 同DFP校正的推导公式一样,DFP校正见博文“优化算法——拟牛顿法之DFP算法”。对于拟牛顿方程:可以化简为:令,则可得:在B_bfgs算法

联想RD430服务器的Raid 5阵列+Esxi6.7部署_esxi6 raid m5015-程序员宅基地

文章浏览阅读3.9k次。一、主要解决的问题:(一)硬盘存储总容量提高+读写速率快1、原RD430服务器主板自带阵列卡仅支持Raid 0、Raid 1、Raid 10,主要特点:Raid 0速率快但是某一块硬盘物理故障后,所有数据都将丢失;Raid 1需要一半的硬盘做冗余,容量牺牲较多,速率比Raid 0降一倍。Raid 10容量牺牲一半,速率比Raid1稍快。2、独立阵列卡的Raid 5特点:Raid 5改进的特点:比如8个硬盘做成的阵列,总容量少1块硬盘的空间,某数据分布于不同的7个硬盘上,另1块硬盘进行数据校验,校验_esxi6 raid m5015

Linux安全应用2-程序员宅基地

文章浏览阅读59次。[root@localhost 桌面]# service NetworkManager stop[root@localhost 桌面]# chkconfig NetworkManager off[root@localhost 桌面]# setup[root@localhost 桌面]# vim /etc/udev/rules.d/70-persistent-net.rules..._linux本地安全2

深度篇——人脸识别(一)  ArcFace 论文 翻译_arcface论文-程序员宅基地

文章浏览阅读6.6k次,点赞23次,收藏120次。返回主目录返回 目标检测史 目录上一章:深度篇——目标检测史(八)CPTN 论文 翻译论文地址:《ArcFace: Additive Angular Margin Loss for Deep Face Recognition》源码地址:InsightFace: 2D and 3D Face Analysis Project本小节,ArcFace 论文 翻译,下一小节细说 ArcFace文本检测 代码一.ArcFace 论文 翻译1.概述..._arcface论文

台式计算机有没有无线连接模块,台式机能不能连接wifi_台式机怎么连接wifi-程序员宅基地

文章浏览阅读1.2k次。2016-12-30 09:54:26你好!很高兴为你解答,先将无线路由器接通电源,然后插上网线,将另一端插到你电脑上,等网络通了之后,你在IE浏览器上输入:192.168.1.1(这是一般无线路由器的IP,如果有特殊...2016-12-16 11:44:30手机系统问题,可能系统出现了问题,导致连接上了WiFi却无法上网。重启一下路由器试试,或者将路由器恢复一下出厂设置,然后重新拨号上网,并根..._计算机无线模块怎么看

OpenGLES编程思想-程序员宅基地

文章浏览阅读4.8k次。最近在看gles的reference,想多了解一下gles的底层,gles是opengl在khronos在嵌入式设备上的图形硬件的软件访问接口,很多东西和opengl似曾相似,但是和opengl又有很大的不同,最新的标准是gles3.2,标准文档非常长,如果不是写引擎没必要对每个接口烂熟于心,但是为了能够了解他,我对他的编程思想做个总结,最重要的是理解gles的设计思路,然后在使用的时候也必将容易找到相关接口。所以本文基本不会列出gles的每个接口,不会记录讲解每个接口,而是希望能够通过总结gles的设计思_gles