Web前端-Vue控制台报错：Uncaught (in promise) TypeError:

最新推荐文章于 2024-07-18 15:07:40 发布

MinggeQingchun

最新推荐文章于 2024-07-18 15:07:40 发布

阅读量2.3w

点赞数 3

分类专栏： Web前端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/MinggeQingchun/article/details/120003750

版权

Web前端专栏收录该内容

31 篇文章 5 订阅

订阅专栏

本文探讨了前端开发中常见的Uncaught in promise TypeError错误，包括空指针、参数重复和未捕获异常等问题。举例展示了在Java后端抛出异常，如用户名为空时，如何在前端进行验证和错误处理。通过Vue组件和Promise的catch方法来捕获并显示错误信息，确保用户体验和代码健壮性。

摘要由CSDN通过智能技术生成

开发前段时经常遇到如下报错：

Uncaught (in promise) TypeError:

大致错误有如下三种：

1、使用的参数可能为 null 或者 undefined

2、返回的参数有重复

3、未捕获异常

如，我在后台Java（前端Vue，后端Java都是本人开发）中，判断了用户名是否为空，抛出了一个异常错误：

if(user.getUserName() == null) {
   throw new RuntimeException("请填写用户名!");
}

js中在 promise 实例最后一步捕获所有错误，通过调用 catch() 方法来实现捕获错误

    /** 提交按钮 */
    submitForm() {
      console.log("新增修改 this.form" + this.form);
      for(let key in this.form){
        console.log('key:'+ key + '   value:' + this.form[key]);
      }

      //用户名
      if (this.form.userName == null){
          this.$message.error("请填写用户名!");
          return;
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != null) {
            updateUser(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).catch((error) => {
              console.log('error：'+error);
            });
          } else {
            addUser(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).catch(function (error) {
              console.log('error：'+ error);
            });
          }
        }
      });
    },