element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error

问题场景:前端使用vue-admin-teamplate-master搭建,写了删除一行数据的功能,在按钮点击删除后提示删除成功,但是随后先报了绿框提示删除成功,随后弹出红框但是没有提示信息,浏览器F12显示Uncaught (in promise) error。
组件地址:element-ui组件地址
源码:

首先是index.vue页面部分点击事件绑定

 //删除的方法
    removeDataById(id) {
      // console.log(id)
      //调用方法根据id删除
      // teacher.deleteTeacherId(id)
      //         .then()
      //         .catch()
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
            return  teacher.deleteTeacherId(id)
        }).then(()=>{
              this.getListTeacher()//刷新页面
          this.$message({
            type: "success",
            message:
              "删除成功!"
          })
        })
        .catch(response => {
          console.log("跑catch里了");
          //判断点击取消,还是删除失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败"
            });
          }
        });

随后是teacher.js创建方法调用

export default {
//删除方法
    deleteTeacherId(id) {
        //下面这种格式是固定的
        return request({
            //这是后端Controller里的路径.这里斜杠务必要带上
            url: '/eduservice/teacher/' + id,
            //提交方式
            method: 'delete'
        })
    }
    }

前端页面场景还原
element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error_第1张图片
element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error_第2张图片
-----------以上就是错误发生场景-------------
解决方法:
在后端controller删除方法返回值有问题!!!

附上R的源码:这个类只是一个公共类

package com.online.edu.common;


import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.HashMap;
import java.util.Map;

@Data
//定义具体的数据返回格式
@ApiModel(value = "全局统一返回结果")
public class R {

    @ApiModelProperty(value = "是否成功")
    private Boolean success;

    @ApiModelProperty(value = "返回码")
    private Integer code;

    @ApiModelProperty(value = "返回消息")
    private String message;

    @ApiModelProperty(value = "返回数据")
    private Map<String, Object> data = new HashMap<String, Object>();

    private R(){}

    //操作成功,调用这个方法,返回成功的数据
    public static R ok(){
        R r = new R();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("操作成功");
        return r;
    }

    //操作失败,调用这个方法,返回失败的数据
    public static R error(){
        R r = new R();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("操作失败");
        return r;
    }


    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

    public R data(Map<String, Object> map){
        this.setData(map);
        return this;
    }
}

至此问题解决,前端不再报错!
element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error_第3张图片

你可能感兴趣的:(Weirdo,Exception)