vue使用axios时关于this的指向问题详解


Posted in Javascript onDecember 22, 2017

前言

众所周知axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。更多的详细介绍大家可以参考这里:https://3water.com/article/109444.htm

本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧。

1.解决办法

在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决。如下:

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 })
  .then(function(response){
  console.log(this); //这里 this = undefined
  })
  .catch((error)=> {
  console.log(error); //箭头函数"=>"使this指向vue
  });

 });
 }
}

2. 原因

ES6中的 箭头函数 "=>" 内部的this是词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

3. 题外话

使用"=>"函数,就可以告别之前的两种写法了:

bind(this)来改变匿名函数的this指向

hack写法 var _this= this;

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //这里 _this 指向vue
 })
 });
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
微信小程序开发探究
Dec 27 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
使用axios实现上传图片进度条功能
Dec 21 #Javascript
详解使用webpack构建多页面应用
Dec 21 #Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 #Javascript
You might like
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
BootStrap selectpicker
2016/06/20 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
pytorch中的inference使用实例
2020/02/20 Python
Python绘制动态水球图过程详解
2020/06/03 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
超市营业员岗位职责
2013/12/20 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
授权收款委托书
2014/09/23 职场文书
用人单位聘用意向书
2015/05/11 职场文书
警示教育片观后感
2015/06/17 职场文书