vue axios用法
来源:互联网 发布:淘宝淘积木 编辑:程序博客网 时间:2024/05/17 06:33
1
axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。
下面我们来使用axios
1
npm install axios --save-dev
1
import
axios from
"axios"
这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题
1
1. Vue.prototype.$ajax=axios
好像还有另外一种方法,是不需要去修改Vue的原型的,那就是我们除了npm install安装axios依赖以外,再去安装一个vue-axios
1
npm install vue-axios --save-dev<br>
import
Vueaxios from
"vue-axios"
我都是用第一种方法的,这种没试过,有兴趣大家可以去试试。
在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令
1
2
3
4
5
6
7
8
9
10
methods: {
submitForm () {
this
.$ajax({
method:
'post'
,
url:
'你的请求url'
,
data: {
name:
'haha'
,'
}
})
}
上述只是写了发起请求,并没有请求返回数据的回调。
1
2
3
4
5
6
.then(
function
(res){
console.log(res)
})
.
catch
(
function
(err){
console.log(err)
})
这是axios的回调函数,.then为请求成功的回调函数,而.catch为请求失败的回调函数
这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,怎么办嘞????
只要添加一个 .bind(this) 就能解决这个问题
1
2
3
.then(
function
(res){
console.log(
this
.data)
}.bind(
this
))
阅读全文
0 0
- vue axios用法
- vue axios
- Vue axios
- axios用法
- vue-axios使用
- Vue-axios快速上手
- vue+axios 登录拦截
- vue之axios使用
- vue-axios整合使用
- vue-cli 使用axios
- vue axios全攻略
- vue实力封装axios
- vue之axios
- vue axios全攻略
- vue axios 的使用
- vue axios-2
- vue axios 二次封装
- Vue之axios
- 【华为机试】计算字符个数
- 基于Swift的iOS应用程序开发:对字符串进行MD5加密
- opencv + cmake + vs2010 配置过程
- NYOJ 156 Hangover
- 【转载】猫都能学会的Unity3D Shader入门指南(二)
- vue axios用法
- HPU2017-2016级暑期集训练习赛
- C语言-printf()和scanf()中*的作用
- STL 常用操作指令和内建函数
- leetcode 155. Min Stack | 空间换时间
- Stones(优先队列)
- [leetcode]529. Minesweeper
- 文章标题
- 快学Scala习题解答—第二章 控制结构和函数