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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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 ajax 静态分页过程形式
2011/09/02 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php开发文档 会员收费1期
2012/08/14 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python的几种主动结束程序方式
2019/11/22 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
几个SQL的面试题
2014/03/08 面试题
银行实习的自我鉴定
2013/12/10 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
村干部承诺书
2014/03/28 职场文书
医学专业自荐信
2014/06/14 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
《实心球》教学反思
2016/02/23 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android