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()修改当前页 ...
随机推荐
- Excel 2010高级应用-饼图(四)
Excel 2010高级应用-饼图(四) 基本操作如下: 1.新建空白文档,并命名饼图 2.单击"插入",找到饼图样例图 3.选择其中一种饼图图例,单击并在空白文档上生成饼图图框 ...
- 应对不同格式 轻松转换PDF、WORD、PPT、TXT常用文件
PDF.WORD.PPT.TXT,不同格式的文件是不是弄得你眼花缭乱?如何巧妙地将它们相互转换?你不会还在键盘上傻傻地一个字一个字敲吧?教你不同文件格式间的转换方式,轻松几键便能大功告成.职场之上,你 ...
- 【BZOJ2152】聪聪可可(点分治)
[BZOJ2152]聪聪可可(点分治) 题面 Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电 ...
- 【NOI2002】银河英雄传说(并查集)
[NOI2002]银河英雄传说 题面 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军 ...
- BZOJ2820:YY的GCD
Sol 推导:\(n<m,p为质数\) \(ans=\sum_p\sum_{i=1}^{\frac{n}{p}}\mu(i)\frac{n}{pi}\frac{m}{pi}\) \(=\sum_ ...
- XCTF(77777-2)
题目链接:http://47.52.137.90:20000 这道题目和前面的那道题目大致一样,只不过是过滤的函数不一样 检查过滤函数的方式就不写了,直接来解题 检查函数发现过滤了ord ascii ...
- ------ Tor(洋葱路由器)匿名网络源码分析——主程序入口点(一)------
--------------------------------------------------------<概览> tor 的源码包可以从官网下载,可能需要预先利用其它FQ软件才能访 ...
- 华为悦盒 EC6108V9U 破解过程全记录(root扫盲) [原创]
电信宽带送的 IPTV 盒子,CPU 为 Hi3798M,1G 内存,8G 存储,支持 H.265 硬解码,系统为 Android 4.4.2,却只能看电视,岂不浪费?好在华为厚道,还是留了后门供 D ...
- caffe简单介绍
从四个层次来理解caffe:Blob.Layer.Net.Solver. 1.BlobBlob是caffe基本的数据结构,用四维矩阵 Batch×Channel×Height×Weight表示,存储了 ...
- TypeScript入门知识四(表达式和循环)
一,箭头表达式 用来声明匿名函数,消除传统匿名函数的this指针问题 //单行的话可以省略{},多行的不能省. var sum = (arg1,arg2)=> arg1+arg2; //定义一个 ...