浅谈vue使用axios的回调函数中this不指向vue实例,为undefined


Posted in Javascript onSeptember 21, 2020

今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题。

1.解决方法:使用 =>

原代码:

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

修改为:

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then((response) => {
  console.log(response);
 })
 .catch((error) => {
  console.log(error);
 });

2.=>解析

在JS中,箭头函数并不是简单的function(){}匿名函数的简写语法糖,实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,在编写函数时就已经确定了,由上下文确定。而匿名函数的this指向运行时实际调用该方法的对象,无法在编写函数时确定。

不可以当做构造函数,也就是说,不可以使用 new 命令,否则会抛出错误。

this、arguments、caller等对象在函数体内都不存在。

不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数。

箭头函数除了传入的参数之外,其它的对象都没有!在箭头函数引用了this、arguments或者参数之外的变量,那它们一定不是箭头函数本身包含的,而是从父级作用域继承的。

补充知识:axios 中请求的回调函数中的this指针问题

请看下面两组代码

this.axios.post(url, data)
.then(function(result) {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})

this.axios.post(url, data)
.then((result) => {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})

这两组代码的差别在于:请求成功后的回调函数,一个使用匿名函数,一个使用箭头函数

匿名函数的指针指向->函数操作的本身

箭头函数的指针指向->组件

也就是说当你需要使用到组件中声明的变量或者函数,就需要使用箭头函数

以上这篇浅谈vue使用axios的回调函数中this不指向vue实例,为undefined就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
微信小程序云开发详细教程
May 16 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
JS实现小米轮播图
Sep 21 #Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
You might like
PHP实现的json类实例
2015/07/28 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
详解Python中的文件操作
2016/08/28 Python
python的多重继承的理解
2017/08/06 Python
Python扩展内置类型详解
2018/03/26 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python之时间和日期使用小结
2019/02/14 Python
Python列表切片常用操作实例解析
2019/12/16 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
传播学毕业生求职信
2013/10/11 职场文书
公司业务员岗位职责
2014/03/18 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
法制教育主题班会
2015/08/13 职场文书
消防安全培训工作总结
2015/10/23 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python