vue请求过程中调用问题

** 背景

我vue项目methods里面有三个方法，A方法，B方法，C方法，我在执行A方法里面调用B方法，B方法里面调用C方法，就报错了，说TypeError: Cannot read properties of undefined, 这个nextHandleSubmit方法没有被定义，这是为什么？

经过问gpt，结果竟然是：

在上述代码中，箭头函数内部的this指向的是箭头函数被定义时的上下文，而不是方法verifyCheckCode的实例。因此，当你在箭头函数内部调用this.nextHandleSubmit()时，this指向的是箭头函数的上下文，而不是Vue实例，导致无法调用nextHandleSubmit方法。

原文：

 axios
    .post(verifyCheckCodeUrl, formData, {
      headers: {
        'Content-Type': 'multipart/form-data', // 设置请求头
      }
    })
    .then(function (data) {
      var d = data.data;
      if (d.code === 200) {
        console.log("here!")
        // todo 处理token？
        this.nextHandleSubmit()
      }else{
        message('手机验证码验证失败');
      }
    })
    .catch((error) => {
      console.log('verifyCheckCode error: ', error);
    });
},

修改如下：

axios
  .post(verifyCheckCodeUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data', // 设置请求头
    }
  })
  .then( (data) => {   //！！！这边改了！！！！
    var d = data.data;
    if (d.code === 200) {
      // todo 处理token？
      this.nextHandleSubmit()
    }else{
      message('手机验证码验证失败');
    }
  })
  .catch((error) => {
    console.log('verifyCheckCode error: ', error);
  });