vue axios用法教程详解
时间:2019-03-30
本文章向大家介绍vue axios用法教程详解,主要包括vue axios用法教程详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。
下面我们来使用axios
npm install axios --save-dev import axios from "axios"
这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题
1 1. Vue.prototype.$ajax=axios
好像还有另外一种方法,是不需要去修改Vue的原型的,那就是我们除了npm install安装axios依赖以外,再去安装一个vue-axios
npm install vue-axios --save-dev<br>import Vueaxios from "vue-axios"
我都是用第一种方法的,这种没试过,有兴趣大家可以去试试。
在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令
methods: { submitForm () { this.$ajax({ method: 'post', url: '你的请求url', data: { name: 'haha',' } }) }
上述只是写了发起请求,并没有请求返回数据的回调。
.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })
这是axios的回调函数,.then为请求成功的回调函数,而.catch为请求失败的回调函数
这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,怎么办嘞????
只要添加一个 .bind(this) 就能解决这个问题
then(function(res){ console.log(this.data) }.bind(this))
以上所述是小编给大家介绍的vue axios用法教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- 基于改进人工蜂群算法的K均值聚类算法(附MATLAB版源代码)
- RabbitMQ入门-Routing直连模式
- WCF技术剖析之三十二:一步步创建一个完整的分布式事务应用
- .NET的资源并不限于.resx文件,你可以采用任意存储形式[上篇]
- RabbitMQ入门-消息订阅模式
- 年终盘点:2018最值得学习的几种热门编程语言
- 如何编写没有Try/Catch的程序
- RabbitMQ入门-消息派发那些事儿
- RabbitMQ入门-高效的Work模式
- 谈谈分布式事务之四: 两种事务处理协议OleTx与WS-AT
- RabbitMQ入门-从HelloWorld开始
- RabbitMQ入门-从HelloWorld开始
- RabbitMQ入门-初识RabbitMQ
- 谈谈分布式事务之三: System.Transactions事务详解[下篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 新型php漏洞挖掘之debug导致的安全漏洞(Edusoho)
- CVE-2016-3714 - ImageMagick 命令执行分析
- 知乎某处XSS+刷粉超详细漏洞技术分析
- 【STM32H7】第12章 RL-TCPnet V7.X之TCP客户端
- 【STM32F429】第12章 RL-TCPnet V7.X之TCP客户端
- Django DeleteView without confirmation template, but with CSRF attack
- 小记 TypeScript 中的循环引用问题
- 别只会搜日志了,求你懂点检索原理吧
- 分布式系统中的事务问题
- JDK 中的栈竟然是这样实现的?
- 谈一谈如何在Python开发中拒绝SSRF漏洞
- eval长度限制绕过 && PHP5.6新特性
- Cookie-Form型CSRF防御机制的不足与反思
- Python 格式化字符串漏洞(Django为例)
- unity官方案例精讲(第三章)--星际航行游戏Space Shooter