Vue 中Promise 中的方法无法执行
需求：填写单子的页面，需要跳转去其他页面填写相关内容
解决：跳转前先将此页面填写的内容先保存，保存方法结束后再跳转
遇到的问题：前端提示this.submitEvent('NotBack');方法报错
代码一（错误）
// 跳转
doTypeResult(){
let type = 0;
let toPath = "";
if(this.form.type == 1){
type = 1;
}else if(this.form.type ==2){
type = 2;
}else if(this.form.type == 3){
type = 3;
}
// 跳转前保存数据
this.$refs.form.validate((valid) => {
if(valid){
new Promise(function(resolve,reject){
this.submitEvent('NotBack');
resolve();
}).then(() => {
toPath = '/config/view/'+ type+'?id=' + this.form.id;
this.$router.push({path: toPath});
}).catch(() => {
// this.$message.error("跳转出错")
});
}
})
},解决：
代码二（正确），写法：将this，先赋给sel ：let sel = this;
// 跳转
doTypeResult(){
let type = 0;
let toPath = "";
let sel = this;
if(this.form.type == 1){
type = 1;
}else if(this.form.type ==2){
type = 2;
}else if(this.form.type == 3){
type = 3;
}
// 跳转前保存数据
this.$refs.form.validate((valid) => {
if(valid){
new Promise(function(resolve,reject){
sel.submitEvent('NotBack');
resolve();
}).then(() => {
toPath = '/config/view/'+ type+'?id=' + this.form.id;
this.$router.push({path: toPath});
}).catch(() => {
// sel.$message.error("跳转出错")
});
}
})
},报错原因：
promsie里压根就读不到this，可以理解：取不到全局变量，作用域的问题，promise里的this和vue中的this指向不同，promise外面定义let sel = this ，然后在promise里使用 sel 就可以执行方法了
详解案例：vue2.0函数(箭头函数)的this作用域
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。
出错代码及结果：
created : function(){
axios.get('static/data.json').then(function(res){
console.log(this) //undefined
this.user = res.data.user
})
}
普通函数代码改版(正确)：
created : function(){
var _this = this
axios.get('static/data.json').then(function(res){
console.log(this) //undefined
console.log(_this) //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_this.user = res.data.user
})
}从以上结果来看，在created下的函数this指向的是当前创建的vue实例，而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例;
若想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this，而要用在外部函数定义的变量存储的this，也就是当前vue的实例。
箭头函数代码改版(正确)：
created : function(){
axios.get('static/data.json').then((res) => {
console.log(this) //VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
this.user = res.data.user
})
}箭头函数相当于匿名函数，并且简化了函数定义。看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。很明显，使用箭头函数之后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了.
于是乎，我上面的方法可以改装为：
// 跳转
doTypeResult(){
let type = 0;
let toPath = "";
if(this.form.type == 1){
type = 1;
}else if(this.form.type ==2){
type = 2;
}else if(this.form.type == 3){
type = 3;
}
// 跳转前保存数据
this.$refs.form.validate((valid) => {
if(valid){
new Promise((resolve,reject) => {
this.submitEvent('NotBack');
resolve();
}).then(() => {
toPath = '/config/view/'+ type+'?id=' + this.form.id;
this.$router.push({path: toPath});
}).catch(() => {
// this.$message.error("跳转出错")
});
}
})
},ES6的箭头函数来让代码在不升级 Vue2.0的情况下变得更加简洁和统一，可能需要关注作用域等其他的问题，
关于vue2.0使用ES6语法的箭头函数对this作用域的问题，
注意：Promise中执行的方法中，如果还嵌套了异步方法，可能会出现问题
后续再深入理解
参考来源于：
https://www.cnblogs.com/stella1024/p/7598541.html
https://blog.csdn.net/weixin_41888813/article/details/82882878