浅谈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停止输出代码
Jul 20 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php如何获取文件的扩展名
2015/10/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python opencv实现运动检测
2018/07/10 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python 动态调用函数实例解析
2019/10/21 Python
wxPython实现整点报时
2019/11/18 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
借款担保书范文
2014/05/13 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python