废话不多说,直接搞事搞事。

首先安装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基本用法的更多相关文章

  1. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  4. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  5. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  6. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  7. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  8. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  9. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  10. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

随机推荐

  1. Excel 2010高级应用-饼图(四)

    Excel 2010高级应用-饼图(四) 基本操作如下: 1.新建空白文档,并命名饼图 2.单击"插入",找到饼图样例图 3.选择其中一种饼图图例,单击并在空白文档上生成饼图图框 ...

  2. 应对不同格式 轻松转换PDF、WORD、PPT、TXT常用文件

    PDF.WORD.PPT.TXT,不同格式的文件是不是弄得你眼花缭乱?如何巧妙地将它们相互转换?你不会还在键盘上傻傻地一个字一个字敲吧?教你不同文件格式间的转换方式,轻松几键便能大功告成.职场之上,你 ...

  3. 【BZOJ2152】聪聪可可(点分治)

    [BZOJ2152]聪聪可可(点分治) 题面 Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电 ...

  4. 【NOI2002】银河英雄传说(并查集)

    [NOI2002]银河英雄传说 题面 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军 ...

  5. 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_ ...

  6. XCTF(77777-2)

    题目链接:http://47.52.137.90:20000 这道题目和前面的那道题目大致一样,只不过是过滤的函数不一样 检查过滤函数的方式就不写了,直接来解题 检查函数发现过滤了ord ascii ...

  7. ------ Tor(洋葱路由器)匿名网络源码分析——主程序入口点(一)------

    --------------------------------------------------------<概览> tor 的源码包可以从官网下载,可能需要预先利用其它FQ软件才能访 ...

  8. 华为悦盒 EC6108V9U 破解过程全记录(root扫盲) [原创]

    电信宽带送的 IPTV 盒子,CPU 为 Hi3798M,1G 内存,8G 存储,支持 H.265 硬解码,系统为 Android 4.4.2,却只能看电视,岂不浪费?好在华为厚道,还是留了后门供 D ...

  9. caffe简单介绍

    从四个层次来理解caffe:Blob.Layer.Net.Solver. 1.BlobBlob是caffe基本的数据结构,用四维矩阵 Batch×Channel×Height×Weight表示,存储了 ...

  10. TypeScript入门知识四(表达式和循环)

    一,箭头表达式 用来声明匿名函数,消除传统匿名函数的this指针问题 //单行的话可以省略{},多行的不能省. var sum = (arg1,arg2)=> arg1+arg2; //定义一个 ...