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的目的分析
Jan 05 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
巧用canvas
Jan 21 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
python实现bucket排序算法实例分析
2015/05/04 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
详解python单元测试框架unittest
2018/07/02 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
甘南现象心得体会
2014/09/11 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
运动会加油稿30字
2015/07/21 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Go遍历struct,map,slice的实现
2021/06/13 Golang
JS的深浅复制详细
2021/10/16 Javascript