Vue中axios回调函数this不指向Vue实例，如何改写为长尾？

本文共计634个文字，预计阅读时间需要3分钟。

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

1. 解决方法：使用原生态代码：javascriptaxios.get('/user', { params: { ID: 12345 }}).then(function(funct) { // 处理成功情况});

今天在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是词法作用域，在编写函数时就已经确定了，由上下文确定。