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()修改当前页 ...
随机推荐
- freemarker获取封装类中对象的属性
freemarker获取封装类中对象的属性 1.设计思路 (1)封装学生类 (2)创建数据模型 (3)新建student.ftl (4)运行Junit测试文件,生成HTML文件 2.封装学生类 Stu ...
- HI3531由DMA 发起PCIe 事务
Hi3531 PCIe 控制器内含DMA 控制器,DMA 控制器包含有两个DMA 通道(一个 DMA 读通道和一个DMA 写通道).PCIe 控制器内包含的DMA 控制器用于大数据量 的存储器读写事务 ...
- mpeg文件格式分析
MPEG-1流比特层次结构分析总结 1.简要介绍Mpeg 2.Mpeg-1数据流分析 2.1视频序列层(VideoStream) 2.2画面组层(GOP) 2.3画面层(Pictures) 2.4片层 ...
- How to verify Certificate Pinning?
Some friends of mine they worry about the risk of Man-in-the-middle so they ask me how to verify the ...
- Struts2的数据封装
在很多的实际开发场景中,页面提交请求参数Action ,在Action中接收参数并对接收的数据进行封装.封装到一个JavaBean中,将JavaBean传递给业务层中.Struts2数据封装分为两类: ...
- css补充
(一)水平对齐1.使用margin属性水平对齐可通过将左和右外边距设置为 "auto",来对齐块元素.除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 ...
- Python基础_文件的的处理及异常处理
今天主要讲讲文件读写及异常处理. 一.文件操作 1.1 文件的创建及读 打开文件 open 函数 open(file,[option]) file 是要打开的文件 option是可选择的参数文件的打 ...
- 四大组件之BroadcastReceiver基础
1. 系统广播 1.1 动态注册 (1)创建自定义接收器类继承自BroadcaseReceiver,实现onReceive()方法,对接收到的广播的逻辑处理就是写在这个函数中的. (2)实例化 ...
- 【BZOJ4825】【HNOI2017】单旋(Link-Cut Tree)
[BZOJ4825][HNOI2017]单旋(Link-Cut Tree) 题面 题面太长,懒得粘过来 题解 既然题目让你写Spaly 那就肯定不是正解 这道题目,让你求的是最大/最小值的深度 如果有 ...
- Bzoj4872: [Shoi2017]分手是祝愿
题面 Bzoj Sol 首先从大向小,能关就关显然是最优 然后 设\(f[i]\)表示剩下最优要按i个开关的期望步数,倒推过来就是 \[ f[i]=f[i-1]*i*inv[n]+f[i+1]*(n- ...