axios 异步多个 MessageBox.confirm 弹出，点击取消全部关闭

萝卜芹菜芽

于 2023-02-23 17:34:50 发布

阅读量728

点赞数

分类专栏： vue-npm 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/github_36327470/article/details/129185798

版权

vue-npm 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章讲述了在使用axios处理异步错误时遇到Element-UI的MessageBox确认框无法正确关闭的问题。作者提供了具体的解决方案，即使用$confirm和vue.$msgbox.close()来避免多次弹出确认框。

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

axios 异步错误码，弹框提示：responseBusinessError.js

MessageBox 无效：

MessageBox.confirm 是个Promise, 没有 close 方法，点击取消会弹出多个

import {MessageBox,} from 'element-ui';

if (code === 50008) {
    // 去重新登录
    messageBox.push(MessageBox.confirm('您已注销，您可以取消停留在此页面，或重新登录', '确认注销', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      toMDSLogin();
    }).catch(() => {
      messageBox.forEach((v) => {
        v.close();
      });
    }));
  }

解决：`$confirm && vue.$msgbox.close();`

import Vue from 'vue';
const vue = new Vue();


if (code === 50008) {
    vue.$confirm('您已注销，您可以取消停留在此页面，或重新登录', '确认注销', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      toLogin();
    }).catch(() => {
      vue.$msgbox.close();
    });
  }

来源 https://blog.csdn.net/lazy_ting/article/details/108597773