浅谈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 相关文章推荐
js获取变量
Aug 24 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
javascript复制对象使用说明
Jun 28 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 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设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
php自动加载代码实例详解
2021/02/26 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python中@property的理解和使用示例
2019/06/11 Python
python常用函数与用法示例
2019/07/02 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
致接力运动员广播稿
2014/02/17 职场文书
租房协议书范本
2014/04/09 职场文书
捐款活动总结
2014/08/27 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
涨价通知怎么写
2015/04/23 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
spring boot实现文件上传
2022/08/14 Java/Android