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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
JavaScript 的继承
Oct 01 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Js四则运算函数代码
Jul 21 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
vue中touch和click共存的解决方式
Jul 28 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php生成短网址示例
2014/05/05 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
python 循环while和for in简单实例
2016/08/16 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
小学教师岗位职责
2015/04/02 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
拖欠货款起诉状
2015/05/20 职场文书
整脏治乱工作简报
2015/07/21 职场文书
合同补充协议书
2016/03/24 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python