【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）

Ant Design的Modal组件在业务中十分常用。当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。今天用大白话来讲讲如何用promise来延迟关闭确认对话框（Modal.confirm）。

业务场景

当开发删除、退出等功能时，我们常常会使用Modal.confirm()来实现。希望用户点击确定按钮后，请求相应的接口，请求成功后再关闭该弹窗。
效果图展示（在文章的最后会附上代码）：

分析

其实官网也有一块是讲如何使用promise延迟关闭确认对话框的，不过它用的是setTimeout这个异步场景，我们在实际开发中更常见的应该是网络请求这种异步场景。外带说一句，异步场景其实就仨：定时任务、网络请求和事件绑定。只要你去理解了Promise，就会发现万变不离其宗。

至于为什么要去实现延迟关闭的效果呢？我的理由如下：

1. 站在开发的角度，为了避免请求还未完成，用户就去进行其他操作。
2. 站在用户的角度来说，我更希望点击弹窗的确定按钮后，先不要关闭弹窗，而是显示loading的效果让我稍作等待。当我操作成功后，再关闭掉这个弹窗，并提示一下我已经操作成功了。这样的话，我会更清楚当前是个什么状态，能不能做其他操作了。

代码–拿来即用

<a @click="showConfirm('1')">删除a>

// author by Emily酱 from CSDN
// 弹出确认框
showConfirm (mockId) {
     
  const _this = this
  this.$confirm({
     
    title: `你想要删除此项吗?`,
    content: `当你点击确认按钮时, 这个对话框将会在删除成功时关闭`,
    onOk () {
     
      return new Promise((resolve, reject) => {
     
        const res = _this.confirmOnOk(resolve, reject, mockId)
        return res
      }).catch(() => console.log('出错!'))
    },
    autoFocusButton: null
  })
},
// 点击确认框的确定按钮时触发 -- 发送的接口、需要传递的参数以及接口响应成功后有什么操作，都将根据你的项目实际去修改。
confirmOnOk (resolve, reject, mockId) {
     
  const param = {
     
    mockId
  }
  delItem(param).then(res => {
     
    resolve() // 接口响应成功，返回 promise 时 resolve 后自动关闭询问弹窗
    if (res.code === 200) {
     
      this.$message.success(res.msg)
	  // 做一些你需要的操作
    } else {
     
      this.$message.error(res.msg, 5)
    }
  })
}