在 sweetalert2 中显示来自 preConfirm 的错误消息答案

【问题标题】：Show error message from preConfirm in sweetalert2在 sweetalert2 中显示来自 preConfirm 的错误消息
【发布时间】：2019-11-26 07:09:29
【问题描述】：

我正在使用sweetalert2 和sweetalert2-react-content。我的inputValidator 工作正常，它会向用户显示错误。如何在我有 AJAX 请求的 preConfirm 中执行相同的操作？

    MySwal.fire({
        title: 'title',
        input: 'text',
        html: this.renderInfoText(),
        showLoaderOnConfirm: true,
        inputValidator: (value) => {
            return new Promise((resolve) => {
              if (this.validate(value)) { 
                resolve()
              } else {
                resolve('check formatting...')
              }
            })
        },            
        preConfirm: (pno) => {
            return axios.post('/some/route', { pno })
                .then(response => { 
                    // ...
                })
                .catch(error => {
                    // show an error message to the user from here?
                });
        }
    })

【问题讨论】：

尝试使用 fetch 代替 axios，我快速浏览了网站，他们正在使用 fetch

标签： reactjs sweetalert2

【解决方案1】：

这实际上记录在AJAX request example 下的examples 中。这是我的解决方案：

MySwal.fire({
    title: 'title',
    input: 'text',
    html: this.renderInfoText(),
    showLoaderOnConfirm: true,
    inputValidator: (value) => {
        return new Promise((resolve) => {
          if (this.validate(value)) { 
            resolve()
          } else {
            resolve('check formatting...')
          }
        })
    },            
    preConfirm: (pno) => {
        return axios.post('/some/route', { pno })
            .then(response => { 
                // ...
            })
            .catch(error => {
                if (error.response.status === 404) {
                    MySwal.showValidationMessage(error.response.data.message)                        
                }                        
            });
    }
})

【讨论】：

【解决方案2】：

here他们在一些例子中使用了fetch，尝试使用它

MySwal.fire({
        title: 'title',
        input: 'text',
        html: this.renderInfoText(),
        showLoaderOnConfirm: true,
        inputValidator: (value) => {
            return new Promise((resolve) => {
              if (this.validate(value)) { 
                resolve()
              } else {
                resolve('check formatting...')
              }
            })
        },            
        preConfirm: (pno) => {
            return fetch('/some/route', {
                method: 'POST',
                body: JSON.stringify(pno),
                headers: {
                'Content-Type': 'application/json'
            })
                .then(response => { 
                    // ...
                })
                .catch(error => {
                    // show an error message to the user from here?
                });
        }
    })

【讨论】：

感谢您的努力，在文档中找到了解决方案。解锁后我会奖励你。