vue.js一个this问题

Question

goLogin() {
        console.log(url.loginIn)
         this.loading = true
        if (this.userInfo.phone == "" || this.userInfo.password == "") {
            this.$message.error("账号或密码不能为空哦！");
            this.loading = false
        } else {
            this.$axios.post(url.loginIn,{phone: this.userInfo.phone,password: this.userInfo.password})
                .then(response => {
                    console.log(response);
                    if (response.status == 200) {
                        this.loading = false
                        if (response.data.resultCode == 1) {
                            this.$message({message:"登录成功", type:"success"});
                        } else {
                            this.$message.error("账号密码错误请重新输入哦！");
                            return
                            this.loading = false
                        }
                    } 
                })
                .catch(function(error) {
                    console.log(error);
                    this.loading = false
                    alert('失败')
                       
                });
        }
    },
    
    
    为什么最上面的this.loading = true可以而.catch()里面的this.loading = false报：TypeError: Cannot set property 'loading' of undefined这个错它们不都是一个吗

Answer 1

.catch((error) => {
                    console.log(error);
                    this.loading = false
                    alert('失败')
                       
                });

箭头函数，因为你上边用的箭头函数所以可以

Answer 2

你把catch里的函数写成箭头函数试试，this的执向丢失了可能