Javascript 在VueJS中使用Axios-此选项未定义

使用typescript和vuejs+axios，我对post请求具有以下.catch函数-我试图捕获一些网络错误并向最终用户报告状态：

      .catch(function(error) {
          console.error(error.response);
          if ( error.message === "Network Error" ) {
              this.alert.show = 1;
              this.alert.message = error.message + ': Please try again later';
          }
      });

this.alert.show在调试器中抛出未定义的“this”。这通常是javascript/typescript和异常处理程序的问题，还是Axios中的一个bug，或者是我找不到文档的设计决策

有没有一种方法可以让我在没有“this”引用的情况下将其传达给我的组件

完整块：

export default {
  data() {
    return {
      form: {
        email: '',
        password: '',
      },
      alert: {
          show: 0,
          message: '',
      },
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();

      if (this.form.password.length > 0) {
          // TODO: Hideous workaround for .catch().
          let that = this;
          this.$http.post('http://localhost:3000/login', {
              email: this.form.email,
              password: this.form.password,
          })
          .then((response) => {
              const is_admin = response.data.user.is_admin;
              localStorage.setItem('user', JSON.stringify(response.data.user));
              localStorage.setItem('jwt', response.data.token);

              if (localStorage.getItem('jwt') != null) {
                  this.$emit('loggedIn');
                  if (this.$route.params.nextUrl != null) {
                      this.$router.push(this.$route.params.nextUrl);
                  } else {
                      if (is_admin === 1) {
                          this.$router.push('admin');
                      } else {
                          this.$router.push('dashboard');
                      }
                  }
              }

          })
          .catch((error) => {
                console.error(error);
                if ( error.message === 'Network Error' ) {
                    this.alert.show = 10;
                    this.alert.message = error.message + ': Please try again later';
                }
          });
      }
    },
    onReset(evt) {
      evt.preventDefault();
      /* Reset our form values */
      this.form.email = '';
      this.form.password = '';
      /* Trick to reset/clear native browser form validation state */
      this.show = false;
      this.$nextTick(() => { this.show = true; });
    },
  },
};

Vue模板（Login.Vue）：

登录
请输入您的电子邮件和密码

提交
重置
{{alert.message}

---

也使用

您正在创建一个新的本地函数作用域。使用胖箭头代替

.catch((error) => {
      console.error(error.response);
      if ( error.message === "Network Error" ) {
          this.alert.show = 1;
          this.alert.message = error.message + ': Please try again later';
      }
  });

---

您还可以将

这个
分配给一个全局变量，并在回调中访问它：

    let that =this;
    ...
    .catch((error) => {
  console.error(error.response);
  if ( error.message === "Network Error" ) {
      that.alert.show = 1;
      that.alert.message = error.message + ': Please try again later';
  }
  });

有趣。error.response变为未定义，但调试器仍显示未定义，但我的登录警报框最终仍会显示。很多基本的javascript对我来说仍然是新的，即使使用了很多年。你能展示更多这个块吗？如何调用较大的函数？你的解决方案是最好的，我认为他在其他地方失去了背景。我相信你是正确的，这是最好的解决方案。它似乎在浏览器（chromium）中工作，但调试器仍显示它未定义。添加整个块。似乎只工作一次。您如何在Vue环境中使用此功能？将
此
存储在变量中是否有任何副作用？它是否正常被垃圾收集？当你的应用程序/组件被销毁时，变量（引用）也将被销毁，它不是副本，只是引用，
    let that =this;
    ...
    .catch((error) => {
  console.error(error.response);
  if ( error.message === "Network Error" ) {
      that.alert.show = 1;
      that.alert.message = error.message + ': Please try again later';
  }
  });