react + antd +Modal.confirm 实现 弹

碰到这样一个需求 就是当我点击确定的时候实现一个loading 的效果 

![image.png](https://img.haomeiwen.com/i21481816/8d41c1401873b20c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我是这样做的

总结起来就是返回一个 promise 函数 把resolve,和reject 作为参数,传给我们要发起请求的事件里面，当我们请求成功的时候执行 resolve 失败的时候就 执行 一下 reject 函数 这样就可以实现啦

confirm = record => {
    const { status } = this.props
    const tipsInfo =
      status === dealStatus.alreadyCheck.status
        ? '请确认开启查看吗？'
        : '请确认开启人工审核吗？'
    Modal.confirm({
      title: tipsInfo,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        return this.viewDetail(record)  // 因为onOk 返回一个promise 就会触发loading效果 我这个请求就是个 Promise
      }
    })
  }

  viewDetail = record => {
    const { status, readOnly } = this.props
    const { serialNum, idcard, channelCode } = record

    this.setState({ loading: true, detailRowData: record })
    if (status !== dealStatus.alreadyCheck.status) {
      return this.props.actions
        .postOpenAudit({ serialNum })
        .then(data => {
          this.setState({
            isShowDetailModal: true,
            serialId: serialNum, // 流水号
            idNumber: idcard, // 身份证号
            loading: false,
            channelCode: channelCode
          })
        })
        .catch(e => {
          message.error(e.message)
          throw new Error(e)
        })
    }

    this.setState({
      isShowDetailModal: true,
      serialId: serialNum, // 流水号
      idNumber: idcard, // 身份证号
      loading: false,
      channelCode: channelCode
    })

    return Promise.resolve()
  }

优化一下