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

首先安装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. AM335x(TQ335x)学习笔记——触摸屏驱动编写

    前面几篇文章已经通过配置DTS的方式完成了多个驱动的移植,接下来我们解决TQ335x的触摸驱动问题.由于种种原因,TQ335x的触摸屏驱动是以模块方式提供的,且Linux官方内核中也没有带该触摸屏的驱 ...

  2. MyEclipse保存出现错误

    1.错误描述 Errors occurred during the build. Errors running builder 'JavaScript Validator' on project 'S ...

  3. FAT32文件系统的存储组织结构(一)

    对磁盘的物理结构,逻辑结构和存储结构有了比较深入的了解后,我们来仔细探讨FAT32文件系统的存储组织结构.说到文件系统的组织结构,我们应该马上意识到,这指的是文件系统在同一个分区内的组织结构,在这个话 ...

  4. python datetime 与 time模块

    time模块 tmie.strptime :将时间字符串转化为时间类型 格式:time.strptime(string[string[, format]) 结果可以利用利用time.tm_year 返 ...

  5. 异常-----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 ...

  6. 【转】Java中hashCode的作用

    以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode  ...

  7. 一篇关于PHP性能的文章

    一篇关于PHP性能的文章 昨晚清理浏览器收藏夹网址时,发现了http://www.phpbench.com/,想起来应该是2015年发现的一个比较性能的文章,我就点进去看了看,发现还是全英文耶,刚好最 ...

  8. ProgressBar、ProgessDialog用法解析

    一.ProgressBar 1. 常用类型 1.1 不确定式圆形进度条 style="@android:style/Widget.Holo.Light.ProgressBar" s ...

  9. gprecoverseg导致的元数据库问题致使数据库无法启动以及修复

    一.现象描述 在一次执行gprecoverseg后发现数据库无法正常连接,现象如下: 执行gprecoverseg日志如下: gprecoverseg:mdw-:gpadmin-[INFO]:-Sta ...

  10. 【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 ...