vue-axios基本用法
废话不多说,直接搞事搞事。
首先安装axios:
1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save //它的作用是能把json格式的直接转成data所需的格式
安装成功后,在main.js页面引用:
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs' Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册,使用方法为:this.qs
最后开始使用请求:
<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //这里是发送给后台的数据
userId:this.userId,
token:this.token,
})
}).then((response) =>{ //这里使用了ES6的语法
console.log(response) //请求成功返回的数据
}).catch((error) =>{
console.log(error) //请求失败返回的数据
})
}
}
</script>
本文介绍的是axios的基本用法,详细看官方文档https://github.com/axios/axios
一个程序猿开了一个公众号,喜欢的朋友可以关注一下哦《时间的信箱》

vue-axios基本用法的更多相关文章
- 基于Vue + axios + WebApi + NPOI导出Excel文件
		
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
 - Vue组件基础用法
		
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
 - checkbox在vue中的用法小结
		
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
 - vue axios 取消上次请求
		
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
 - vue axios拦截器 + 自编写插件 实现全局 loading 效果;
		
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
 - vue axios使用form-data的形式提交数据的问题
		
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
 - checkbox在vue中的用法总结
		
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
 - VUE AXIOS 跨域问题
		
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
 - vue axios  总结篇
		
1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...
 - vue+axios新手实践实现登陆
		
vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...
 
随机推荐
- AM335x(TQ335x)学习笔记——触摸屏驱动编写
			
前面几篇文章已经通过配置DTS的方式完成了多个驱动的移植,接下来我们解决TQ335x的触摸驱动问题.由于种种原因,TQ335x的触摸屏驱动是以模块方式提供的,且Linux官方内核中也没有带该触摸屏的驱 ...
 - MyEclipse保存出现错误
			
1.错误描述 Errors occurred during the build. Errors running builder 'JavaScript Validator' on project 'S ...
 - FAT32文件系统的存储组织结构(一)
			
对磁盘的物理结构,逻辑结构和存储结构有了比较深入的了解后,我们来仔细探讨FAT32文件系统的存储组织结构.说到文件系统的组织结构,我们应该马上意识到,这指的是文件系统在同一个分区内的组织结构,在这个话 ...
 - python datetime 与 time模块
			
time模块 tmie.strptime :将时间字符串转化为时间类型 格式:time.strptime(string[string[, format]) 结果可以利用利用time.tm_year 返 ...
 - 异常-----web.xml文件报错 	Multiple annotations found at this line: 	- cvc-complex-type.2.4.b: The content of element 'welcome-file-list' is not complete. One of '{"http://java.sun.c
			
1,检查抬头是不是有问题. <?xml version="1.0" encoding="UTF-8"?><web-app version=&q ...
 - 【转】Java中hashCode的作用
			
以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode ...
 - 一篇关于PHP性能的文章
			
一篇关于PHP性能的文章 昨晚清理浏览器收藏夹网址时,发现了http://www.phpbench.com/,想起来应该是2015年发现的一个比较性能的文章,我就点进去看了看,发现还是全英文耶,刚好最 ...
 - ProgressBar、ProgessDialog用法解析
			
一.ProgressBar 1. 常用类型 1.1 不确定式圆形进度条 style="@android:style/Widget.Holo.Light.ProgressBar" s ...
 - gprecoverseg导致的元数据库问题致使数据库无法启动以及修复
			
一.现象描述 在一次执行gprecoverseg后发现数据库无法正常连接,现象如下: 执行gprecoverseg日志如下: gprecoverseg:mdw-:gpadmin-[INFO]:-Sta ...
 - 【POJ2387】Til the Cows Come Home (最短路)
			
题面 Bessie is out in the field and wants to get back to the barn to get as much sleep as possible bef ...